<!--  -->
<template>
  <div class="pc_main">
    <div class="head">
      <ul>
        <li class="logo">
          <router-link to="/"
            >
            <!-- <img src="../assets/image/logo.png" alt=""/> -->
          </router-link>
        </li>
        <li>我的文件</li>
        <li>我的设计</li>
      </ul>
      <ul></ul>
      <ul>
        <li :style="{'visibility':(needUpVipLevel.length+needUpVipLevelBg.length)>0?'visible':'hidden'}" style="font-size:0.8rem"><span style="color:#d9374b">{{needUpVipLevel.length+needUpVipLevelBg.length}}</span>个元素需要升级会员才可使用</li>
        <li>升级会员</li>
        <li @click="save">下载图片</li>
      </ul>
    </div>
    <vue-context-menu
      class="right-menu"
      :target="contextMenuTarget"
      :show="contextMenuVisible"
      @update:show="(show) => (contextMenuVisible = show)"
    >
      <button
        class="rightMenuBtn"
        @click="rightMenuFn(0, $event)"
        :disabled="!canSetTop"
      >
        置于顶层
      </button>
      <button
        class="rightMenuBtn"
        @click="rightMenuFn(1, $event)"
        :disabled="!canSetBottom"
      >
        置于底层
      </button>
      <button
        class="rightMenuBtn"
        @click="rightMenuFn(2, $event)"
        :disabled="!canSetLast"
      >
        上移一层
      </button>
      <button
        class="rightMenuBtn"
        @click="rightMenuFn(3, $event)"
        :disabled="!canSetNext"
      >
        下移一层
      </button>
      <button
        class="rightMenuBtn"
        @click="rightMenuFn(4, $event)"
        :disabled="!canLocked"
      >
        {{ eleLocked ? "取消锁定" : "锁定" }}
      </button>
      <!-- <button
        class="rightMenuBtn"
        :disabled="!canCollected"
        @click="rightMenuFn(5, $event)"
      >
        {{ eleCollected ? "取消收藏" : "收藏" }}
      </button> -->
      <button
        class="rightMenuBtn"
        :disabled="!canDelete"
        @click="rightMenuFn(6, $event)"
      >
        删除
      </button>
    </vue-context-menu>
    <div class="container" v-loading="loading">
          <div class="leftTab" id="left">
            <el-tabs
              :tab-position="tabPosition"
              :value="activeTabName"
              @tab-click="changeTab"
            >
              <el-tab-pane name="template">
                <div slot="label" class="slotBtn">
                  <i class="icon01" :class="(activeTabName=='template'?'icon1-1':'icon1')"></i>
                  <span>模板</span>
                </div>
                <div class="leftListBox">
                    <div class="tplTop">
                       <el-input placeholder="搜索模板" prefix-icon="el-icon-search" v-model="tplSearchValue"></el-input>
                    </div>
                    <div class="tplBox">
                        <ul class="tplTab">
                          <li :class="tplActiveTab==0?'tplTabActive':''" @click="changeTplTab(0)">推荐模板</li>
                          <li :class="tplActiveTab==1?'tplTabActive':''" @click="changeTplTab(1)">我的模板</li>
                        </ul>
                       <div class="infinite-list-wrapper" style="height:95%;overflow:auto">
                        <ul
                          class="list tplList"
                          v-infinite-scroll="load"
                          infinite-scroll-disabled="disabled">
                          <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>
                        </ul>
                        <p v-loading="tplLoading"></p>
                        <p v-if="noMore" class="noMore">没有更多了</p>
                      </div>
                        <!-- <div class="tplList">
                            <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                             <li>
                              <img src="https://imgpub.chuangkit.com/designTemplate/2020/11/18/1661066d-3720-4e26-a67b-c26d6b8ad500_thumb?v=1605681726000&x-oss-process=image/resize,w_600/format,webp" alt="">
                            </li>
                        </div> -->
                    </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="text">
                <div slot="label" class="slotBtn">
                   <i class="icon03" :class="activeTabName=='text'?'icon3-1':'icon3'"></i>
                  <span>文字</span>
                </div>
                <div class="leftTextBox">
                    <div class="addTextBtn" @click="addTextToCanvas">
                     <i class="el-icon-plus" style="font-weight:bold;color:#d9374b"></i>添加文字                    
                    </div>
                    <div class="leftTextList">
                      <ul>
                        <li v-for="item in fontStyleList" :key="item.id" @click="setSystemFontStyleToCanvas(item.id)">
                          <img :src="item.thumb" alt="">
                        </li>
                      </ul>
                    </div> 
                </div>
              </el-tab-pane>
              <el-tab-pane name="material">
                <div slot="label" class="slotBtn">
                    <i class="icon02" :class="activeTabName=='material'?'icon2-1':'icon2'"></i>
                  <span>素材</span>
                </div>
                <div class="leftMaterialBox">
                     <div class="mtlTop">
                       <el-input placeholder="搜索素材" prefix-icon="el-icon-search" v-model="mtlSearchValue"></el-input>
                    </div>
                    <div>
                      <ul class="mtlThirdList">
                          <li class="materialItem"
                            v-for="(item,index) in materialList" :data-index="index"
                            :key="item.id"
                            @click="takeThisToCanvas(index)"
                          >
                            <img :src="item.thumb_temp" alt="素材" />
                            <div
                              class="likeThis"
                              @click.stop="
                                item.collected
                                  ? unCollectThis(item.id,index)
                                  : collectThis(item.id,index)
                              "
                            >
                              <i
                                :class="
                                  item.collected
                                    ? 'el-icon-star-on'
                                    : 'el-icon-star-off'
                                "
                                :style="{
                                  color: item.collected ? '#c80000' : '#fff',
                                }"
                              ></i>
                            </div>
                          </li>
                        </ul>
                    </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="background">
                <div slot="label" class="slotBtn">
                    <i class="icon04" :class="activeTabName=='background'?'icon4-1':'icon4'"></i>
                  <span>背景</span>
                </div>
                <div class="leftBgBox">
                    <div class="bgTop">
                      <ul>
                        <li>
                          <el-color-picker v-model="bgDefaultColor" :predefine="predefineColors" @change="setCanvasBg($event,'color')"></el-color-picker>
                        </li>
                        <li v-for="(item,index) in predefineColors" @click="setCanvasBg(item,'color')" :key="index" :style="{'background':item}"></li>
                      </ul>
                    </div>
                    <div style="overflow:auto;height:100%">
                      <ul class="bgList">
                          <li v-for="(it,index) in bgList" :key="it.id" :data-id="it.id" @click="getBgImg(index)">
                            <img :src="it.url" alt="">
                          </li>
                      </ul>
                    </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="upload">
                <div slot="label" class="slotBtn">
                    <i class="icon05" :class="activeTabName=='upload'?'icon5-1':'icon5'"></i>
                  <span>上传</span>
                </div>
                <div class="leftUploadBox" v-loading="uploading">
                  <div class="topUploadBtn">
                    <el-upload
                      class="upload-demo"
                      action=""
                      :on-change="changeFile"
                      :show-file-list="false"
                      :auto-upload="false"
                      :multiple="true"
                      :file-list="fileList"
                      :limit=5
                      list-type="picture"
                    >
                      <el-button size="small" type="primary">上传本地图片</el-button>
                    </el-upload>
                    <div class="phoneUpload">手机上传图片</div>
                    <div class="uploadTips">
                      <span>*</span>依据国家相关法律规定法规，禁止上传包含色情、违法、侵权等性质内容，违规内容将会删除处理。
                    </div> 
                  </div>
                  <div class="uploadManage">
                    <ul>
                      <li>我的上传</li>
                      <li>
                        <template v-if="manageUpload">
                          <span  @click="toggleUploadStatus">
                          <i class="el-icon-menu"></i>
                          管理
                          </span>
                        </template>
                        <template v-else>
                            <button  @click="toggleUploadStatus">取消</button>
                            <button :disabled="!checkList.length>0" :class="checkList.length>0?'':'notAllowed'" @click="delMyUpload"><i class="el-icon-delete"></i>删除</button>
                        </template>
                       
                      </li>
                    </ul>
                  </div>
                  <div class="myUploadList" style="height:calc(100% - 260px)">
                    <div class="infinite-list-wrapper" style="overflow:auto;height:100%">
                      <ul
                        class="uploadList"
                        v-infinite-scroll="getMyUploadList"
                        infinite-scroll-disabled="disabled">
                        <template v-for="item in uploadList" > 
                          <li v-for="it in item" :key="it.id" :data-id="it.id" >
                          <el-checkbox-group v-show="!manageUpload" v-model="checkList">
                             <el-checkbox @click.stop="" :label="it.id" :data-id="it.id"></el-checkbox>
                          </el-checkbox-group>                          
                          <img :src="it.thumb_temp" alt="" @click="takeMyUploadToCanvas(it.id,it.thumb)">
                          </li>
                        </template>
                      </ul>
                      <p v-if="leftLoading"></p>
                      <p v-if="noMore" class="noMore">没有更多了</p>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div
            class="canvasBox"
            id="center"
            @click.right="rightMouseClick($event)"
            v-loading="centerLoading"
          >
            <canvas id="canvas"  width="1200px" height="800px" ></canvas>
            <div
              v-if="rotating"
              class="angleBox"
              :style="{
                position: 'absolute',
                left: angleX + 'px',
                top: angleY + 'px',
                'z-index': '99999',
              }"
            >
              {{ angle }}°
            </div>
            <div
              v-if="moving"
              class="moveBox"
              :style="{
                position: 'absolute',
                left: moveBoxLeft+ 'px',
                top: moveBoxTop + 'px',
                'z-index': '99999',
              }"
            >
              {{eleX}},{{eleY}}
            </div>
            <div v-if="showTips" class="showTips">按住ALT键可以拖拽画布</div>
            <div class="setZoom">
              <ul>
                <li @click="showPopFn">尺寸调整</li>
              </ul>
              <ul>
                <li @click="reduce"><i class="el-icon-minus"></i></li>
                <li>{{zoomPercentage}}%</li>
                <li @click="large"><i class="el-icon-plus"></i></li>
              </ul>
              <ul>
                <li></li>
              </ul>
            </div> 
          </div>

          <div class="controlArea" id="right" :class="currentTarget==''?'':'showRight'">
            <!-- 当前被操作的对象是图片 显示的操作功能 -->
            <div :class="currentTarget=='img'|| currentTarget=='svg'?'showMtl':''">
              <div class="imgOrFilter">
                <ul>
                  <li :class="imgControlTab=='image'?'imgCtrlActive':''" @click="changeImgTabCtrl('image')">图片</li>
                  <li v-if="(currentTarget=='img' && showFilterTab)" :class="imgControlTab=='filter'?'imgCtrlActive':''" @click="changeImgTabCtrl('filter')">滤镜</li>
                </ul>
              </div>
              <div class="imgControlTabPane">
                <div :class="imgControlTab=='image'?'imgCtrlTabActive':''">
                  <!-- <el-button type="danger">替换图片</el-button> -->
                  <ul class="imgControlBtn">
                    <!-- <li><el-button>裁剪图片</el-button></li> -->
                    <li>
                       <el-button
              :disabled="!canFlipX"
              @click="setElement(7)"
              title="水平翻转"
              >水平翻转</el-button
            >
                    </li>
                    <li>
                       <el-button
              :disabled="!canFlipY"
              @click="setElement(8)"
              title="垂直翻转"
              >垂直翻转</el-button
            >
                    </li>
                    <li v-if="haveCollectBtn">
                       <el-button
              :icon="eleCollected ? 'el-icon-star-on' : 'el-icon-star-off'"
              :style="{ color: eleCollected ? '#d9374b' : '' }"
              :disabled="!canCollected"
              @click="setElement(5)"
              :title="eleCollected?'已收藏':'收藏'"
            >{{eleCollected?'已收藏':'收藏'}}
            </el-button>
                    </li>
                    <li class="opacitySlide">
                      <span>透明度</span>
                  <el-slider
                v-model="opacityValue"
                :disabled="!canSlide"
                @input="setEleOpacity"
              ></el-slider>
              <span>{{opacityValue}}%</span>
                    </li>
                  </ul>
                  <ul class="imgControlBtn2">
                    <li><el-button
              @click="setElement(4)"
              :disabled="!canLocked"
              :title="eleLocked?'解锁':'锁定'"
            >{{eleLocked?'解锁':'锁定'}}</el-button></li>
                    <li class="sortBtn">
                      排序
                      <ul>
                        <li> <el-button
              @click="setElement(2)"
              :disabled="!canSetLast"
              title="上移一层"
            >上移一层</el-button></li>
                        <li><el-button
              @click="setElement(3)"
              :disabled="!canSetNext"
              title="下移一层"
            >下移一层</el-button></li>
                        <li><el-button
              @click="setElement(0)"
              :disabled="!canSetTop"
              title="置顶图层"
            >置顶图层</el-button></li>
                        <li> <el-button
              @click="setElement(1)"
              :disabled="!canSetBottom"
              title="置底图层"
            >置底图层</el-button></li>
                      </ul>
                    </li>
                      <li> <el-button
              :disabled="!canCopy"
              @click="setElement(9)"
              title="复制"
            >复制</el-button></li>
                    <li> <el-button
              :disabled="!canDelete"
              @click="setElement(6)"
              title="删除"
            >删除</el-button></li>
                  </ul>
                </div>
                <div v-if="(currentTarget=='img' && showFilterTab)"  :class="imgControlTab=='filter'?'imgCtrlTabActive':''">
                  <ul  class="systemFilter">
                    <li v-for="(item,index) in systemFilterList" @click="setFilter(index)" :key="index" :style="{filter:'blur('+item.blur+'px)'}">{{item.filterName}}</li>
                  </ul>
                  <ul class="setFilter">
                    <li class="block">
                      <span class="demonstration">亮度(<b>{{brightness}}</b>)</span>
                      <el-slider v-model="brightness" :min=-100 :max=100 :step=1 @input="setDiyFilter(0,'brightness')"></el-slider>
                    </li>
                    <li class="block">
                      <span class="demonstration">对比度(<b>{{contrast}}</b>)</span>
                      <el-slider v-model="contrast" :min=-100 :max=100 :step=1 @input="setDiyFilter(1,'contrast')"></el-slider>
                    </li>
                    <li class="block">
                      <span class="demonstration">饱和度(<b>{{saturation}}</b>)</span>
                      <el-slider v-model="saturation" :min=-100 :max=100 :step=1 @input="setDiyFilter(2,'saturation')"></el-slider>
                    </li>
                    <li class="block">
                      <span class="demonstration">色调(<b>{{hue}}</b>)</span>
                      <el-slider v-model="hue"  :min=-100 :max=100 :step=1 @input="setDiyFilter(3,'rotation')"></el-slider>
                    </li>
                    <li class="block">
                      <span class="demonstration">模糊(<b>{{blur}}</b>)</span>
                      <el-slider v-model="blur" :min=-100 :max=100 :step=1 @input="setDiyFilter(4,'blur')"></el-slider>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- 当前被操作的对象是文字 显示的操作功能 -->
            <div :class="currentTarget=='text'?'showMtl':''" class="textControl">
              <div v-if="!eleLocked">
            
              <div v-if="canSetTextStyle">样式</div>
              <div v-if="canSetTextStyle">
                <ul>
                  <li class="textStyleBox">
                    <el-popover
                    placement="bottom"
                    width="260"
                    trigger="hover">
                     <div class="rightStyleList">
                      <ul>
                        <li @click="setThisStyleToText('default')">默认样式</li>
                         <li v-for="item in fontStyleList" :key="item.id" @click="setThisStyleToText(item.id)">
                          <img :src="item.thumb" alt="">
                        </li>
                      </ul>
                    </div>
                    <el-button slot="reference">文字特效</el-button>
                  </el-popover>
                  </li>
                  <li class="fontColor">
                    <span>颜色</span>
                    <span>
                       <el-color-picker v-if="fontHaveBorder" v-model="strokeColor" :predefine="predefineColors"  size="small" @active-change="setFontStyle(0,$event)"></el-color-picker>
                      <el-color-picker v-model="fontColor" :predefine="predefineColors"  size="small" @active-change="setFontStyle(1,$event)"></el-color-picker>
                    </span>
                  </li>
                   <li class="opacitySlide" v-if="fontHaveBorder">
                      <span>描边大小</span>
                  <el-slider
                v-model="strokeWidth"
                @input="setFontStyle(2)"
              ></el-slider>
              <span>{{strokeWidth}}</span>
                    </li>
                     <li class="opacitySlide">
                      <span>透明度</span>
                  <el-slider
                v-model="fontOpacity"
                @input="setFontStyle(3)"
              ></el-slider>
              <span>{{fontOpacity}}%</span>
                    </li>
                </ul>
              </div>
              <div>文字</div>
              <div>
                <ul>
                  <li>
                    <el-select :loading="fontLoading" v-model="fontFamilyId" @change="setFontStyle(4)" placeholder="请选择字体库">
                      <el-option
                        v-for="item in fontFamilyList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        <span  class="fontBg" :style="{'background-image':'url(http://www.zscm_test.com'+item.img+')'}"></span>
                      </el-option>
                    </el-select>
                  </li>
                  <li>
                     <el-input-number controls-position="right" v-model="fontSize" :min="0"  @change="setFontStyle(5)" :step="1"></el-input-number>
                  </li>
                </ul>
              </div>
              <div class="textCtlBtn" v-if="canSetTextStyle">
                <ul>
                  <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                    <i :class="fontIsBold?'iconfont01-1':'iconfont01'" @click="setFontStyle(6)"></i>
                  </el-tooltip>
                   <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                    <i :class="fontIsItalic?'iconfont02-1':'iconfont02'"  @click="setFontStyle(7)"></i>
                  </el-tooltip>
                   <el-tooltip class="item" effect="dark" content="下划线" placement="top">
                   <i :class="fontIsUnderline?'iconfont03-1':'iconfont03'"  @click="setFontStyle(8)"></i>
                  </el-tooltip>
                   <el-tooltip class="item" effect="dark" content="删除线" placement="top">
                   <i :class="fontIsDelLine?'iconfont04-1':'iconfont04'"  @click="setFontStyle(9)"></i>
                  </el-tooltip>
                </ul>
                <ul>
                  <el-popover
                    placement="bottom-start"
                    width="160"
                    trigger="hover"
                    >
                    <div class="alignWay">
                      <ul>
                        <li @click="setFontStyle(10)"><i class="leftAlign"></i>左对齐</li>
                        <li @click="setFontStyle(11)"><i class="centerAlign"></i>中间</li>
                        <li @click="setFontStyle(12)"><i class="rightAlign"></i>右对齐</li>
                      </ul>
                    </div>
                    <i class="iconfont05" slot="reference"></i>
                  </el-popover>
                  <el-popover
                    placement="bottom-start"
                    width="250"
                    trigger="hover"
                    >
                    <div class="letterSpacing">
                      <el-slider
                        v-model="letterSpacingValue"
                        controls-position="right"
                        :min=-100
                        :max=100
                        @input="setFontStyle(14)"
                        show-input>
                      </el-slider>
                    </div>
                    <i class="iconfont07" slot="reference"></i>
                  </el-popover>
                   <el-popover
                    placement="bottom-start"
                    width="250"
                    trigger="hover"
                    >
                    <div class="letterSpacing">
                      <el-slider
                        v-model="lineHeightValue"
                        controls-position="right"
                        :min=1
                        :max=100
                        :step=0.2
                        @input="setFontStyle(15)"
                        show-input>
                      </el-slider>
                    </div>
                    <i class="iconfont08" slot="reference"></i>
                  </el-popover>
                </ul>
              </div>
              </div> 
              <div class="textCtlBtn2">
                   <ul class="imgControlBtn2">
                    <li><el-button
              @click="setElement(4)"
              :disabled="!canLocked"
              :title="eleLocked?'解锁':'锁定'"
            >{{eleLocked?'解锁':'锁定'}}</el-button></li>
                    <li class="sortBtn">
                      排序
                      <ul>
                        <li> <el-button
              @click="setElement(2)"
              :disabled="!canSetLast"
              title="上移一层"
            >上移一层</el-button></li>
                        <li><el-button
              @click="setElement(3)"
              :disabled="!canSetNext"
              title="下移一层"
            >下移一层</el-button></li>
                        <li><el-button
              @click="setElement(0)"
              :disabled="!canSetTop"
              title="置顶图层"
            >置顶图层</el-button></li>
                        <li> <el-button
              @click="setElement(1)"
              :disabled="!canSetBottom"
              title="置底图层"
            >置底图层</el-button></li>
                      </ul>
                    </li>
                     <li> <el-button
              :disabled="!canCopy"
              @click="setElement(9)"
              title="复制"
            >复制</el-button></li>
                    <li> <el-button
              :disabled="!canDelete"
              @click="setElement(6)"
              title="删除"
            >删除</el-button></li>
                  </ul>
              </div>
            </div>
          </div>  
  <!--  更改画布大小弹出层 -->
    <el-dialog title="调整画布尺寸" :close-on-click-modal="false" :close-on-press-escape="false" :close="closeSizePop" :visible.sync="showPop" :modal-append-to-body="false" top="15%" width="25%">
      <div class="popBox">
        <div class="sizeList">
          <ul>
            <li v-for="(item,index) in sizeList" :key="index" :class="index==currentActiveSizeIndex?'sizeActive':''" @click="chooseChangeSize(index)">{{item.name}} {{item.width}}px*{{item.height}}px</li>
          </ul>
        </div>
        <div class="resizeTip">修改尺寸后，设计场景将会对应切换</div>
        <div slot="footer" class="popFoot">
          <el-button type="primary" @click="confirmResize">提交</el-button>
        </div>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Vue from "vue";
import { fabric } from "fabric";
import _ from "lodash";
import initAligningGuidelines from "@/until/initAligningGuidelines";
import { component as VueContextMenu } from "@xunlei/vue-context-menu";
import FontFaceObserver from 'fontfaceobserver'
// fabric.Object.prototype.set({
//   borderColor: "red",
//   cornerColor: "red", //激活状态角落图标的填充颜色
//   cornerStrokeColor: "", //激活状态角落图标的边框颜色
//   borderOpacityWhenMoving: 1,
//   borderScaleFactor: 1,
//   cornerSize: 8,
//   cornerStyle: "rect", //rect,circle
//   centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
//   centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
//   transparentCorners: false, //激活状态角落的图标是否透明
//   rotatingPointOffset: 80, //旋转距旋转体的距离
//   originX: "center",
//   originY: "center",
//   lockUniScaling: false, //只显示四角的操作
//   hasRotatingPoint: true, //是否显示旋转按钮
//   selectionDashArray: [5, 5],
// });
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    "vue-context-menu": VueContextMenu,
  },
  data() {
    //这里存放数据
    return {
      count: 10,
      fontFamilyList:[],  // 字体库列表
      predefineColors: ['#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1', '#1e90ff','#c71585',],// 颜色选择器默认配置颜色
      currentTarget:'',// 当前操作的对象是图片/svg 还是文字 
      showFilterTab:false,// 是否显示滤镜操作面板
      tplSearchValue:'',// 搜索模板的关键字
      tplActiveTab:0,// 模板-当前选择的推荐模板 0 / 我的模板 1
      fontStyleList:[],// 字体样式列表数据
      mtlSearchValue:'',// 搜索素材的关键字
      bgDefaultColor:'#000',// 取色器默认颜色
      contextMenuTarget: null, //鼠标右键菜单绑定的dom
      contextMenuVisible: false, // 鼠标右键菜单是否可见
      centerLoading:false,// 向画图添加素材loading效果
      loading: false, 
      activeTabName: "template", //当前activeTab
      materialList: [{
        id: 1,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/1.png'),
        thumb: require('../static/img/1.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 2,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/2.png'),
        thumb: require('../static/img/2.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 3,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/3.png'),
        thumb: require('../static/img/3.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 4,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/4.png'),
        thumb: require('../static/img/4.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 5,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/5.png'),
        thumb: require('../static/img/5.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 6,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/6.png'),
        thumb: require('../static/img/6.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 7,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/7.png'),
        thumb: require('../static/img/7.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 8,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/8.png'),
        thumb: require('../static/img/8.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 9,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/9.png'),
        thumb: require('../static/img/9.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 10,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/10.png'),
        thumb: require('../static/img/10.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 11,
        width: 100,
        height: 100,
        thumb_temp:require('../static/img/svg1.png'),
        thumb:'<svg t="1608639756938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1004" width="200" height="200"><path d="M980.69 496.61c17 15.32 3.4 37.63 3.4 37.63L963 559.12a34.62 34.62 0 0 1-29.52 5.62L748.15 434.11l-1 396H270.76l-1-396L84.41 564.74a34.64 34.64 0 0 1-29.53-5.62l-21.05-24.88s-13.63-22.31 3.4-37.63S356.73 210 356.73 210l77.6 141.78 75.39-43h0.8l75.38 43L663.5 210z m-286.21 11.26V401.08h-110.2v106.79z" fill="#FCEB9D" p-id="1005"></path><path d="M719.89 830.09s3 35.3-28.58 35.3h-364.7c-31.62 0-28.58-35.3-28.58-35.3zM584.28 401.08h110.21v106.79H584.28zM626.55 146.25l37 63.74-77.65 141.78-75.38-43L621.37 167s9.52-10.46 5.18-20.75z" fill="#FCDB51" p-id="1006"></path><path d="M626.55 146.25c4.34 10.29-5.18 20.77-5.18 20.77L510.52 308.79h-0.8L398.86 167s-10-11.59-5.59-20l0.42-0.73s5.78-9.9 14-12.17c29.89-8.22 102-14.62 102-14.62h0.8s72.09 6.4 102 14.62c8.28 2.25 14.06 12.15 14.06 12.15z" fill="#FCEB9D" p-id="1007"></path><path d="M398.86 167l110.86 141.79-75.39 43L356.73 210l36.54-63c-4.44 8.43 5.59 20 5.59 20z" fill="#FCDB51" p-id="1008"></path></svg>',
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 0, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 12,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/svg2.png'),
        thumb:'<svg t="1608639771977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" width="200" height="200"><path d="M847.13 815.59l2.72 11.62-0.43 0.09c-9.38 18.39 7.41 47 7.41 47s-36.81 29.1-91 12.42c0 0-0.29-16.3-20.3-44.82l-2.92-5.68 0.26-0.13c41.13 4.56 68.51-2.09 84.92-9.09 12.02-5 18.12-10.28 19.34-11.41z" fill="#FCDB51" p-id="1154"></path><path d="M714.55 249l132.58 566.59c-1.22 1.13-7.32 6.37-19.34 11.45L683.11 219.38c14.75 10.79 27.66 13.49 27.66 13.49z" fill="#F7DC69" p-id="1155"></path><path d="M683.11 219.38L827.79 827c-16.41 7-43.84 13.61-84.92 9.05l-0.26 0.13-222.29-432.11-222.93 432.66-0.42-0.2c-42.81 4.77-70.35-3-86.09-10.52l144.58-608.32c14.61-11.5 30.6-31.47 37-65.54h251c6.66 35.57 24.21 55.88 39.71 67.22z" fill="#FCEB9D" p-id="1156"></path><path d="M714.55 249l-3.78-16.1-27.66-13.5c-15.5-11.34-33.05-31.65-39.71-67.22h48.5zM691.9 152.15H345.06s4.25-23.06 32.15-23.06h284c28.64 0 30.69 23.06 30.69 23.06zM345.06 152.15h47.37c-6.37 34.07-22.36 54-37 65.54l-28.77 14.72L345 152.15z" fill="#FCDB51" p-id="1157"></path><path d="M355.46 217.69L210.88 826c-11.81-5.64-17-11.16-17-11.16l132.78-582.42c0.45-0.09 13.9-3 28.77-14.72z" fill="#F7DC69" p-id="1158"></path><path d="M297.39 836.73l-2.29 4.44c-20 28.52-20.29 44.82-20.29 44.82-54.18 16.68-91-12.41-91-12.41s16.78-28.62 7.41-47l2.67-11.71s5.18 5.52 17 11.16c15.74 7.53 43.28 15.29 86.09 10.52z" fill="#FCDB51" p-id="1159"></path></svg>',
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 0, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 13,
        width: 100,
        height: 100,
        thumb:'<svg t="1608639867592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1604" width="200" height="200"><path d="M860.83 245.85l-120.18 87-58.27-44.55-4.65 133.78q-14.61 4.46-29.16 7.82l14.83-308.52-34.31-7.09 0.16-0.54c24.4 4.54 62.1 12.33 78.74 19.79A151.36 151.36 0 0 1 747.27 154z" fill="#FCEB9D" p-id="1605"></path><path d="M750.68 632.83l99.05 197.66-40.13 11.83c-94.78 27.15-179.31 18.1-179.31 18.1-55.5-8.36-179.3-3.48-179.3-3.48-125.53 3.48-239.94-30.62-239.94-30.62l78.55-194.88s47.82-103.71 76-141.29c0 0 13-23.4 9.72-54.29h-0.06l-0.47-13.78h0.05s25.11 7.67 65.09 13.65c43.85 6.54 105.58 11 171.72 1.17 12.18-1.82 24.53-4.13 36.93-7q14.53-3.37 29.16-7.82l-0.48 13.78c-9 40.36 12.38 90.82 12.38 90.82z" fill="#FCDB51" p-id="1606"></path><path d="M663.39 121.38L648.57 429.9l-36.93 7 17.45-322.6 34.3 7.08z" fill="#FCDB51" p-id="1607"></path><path d="M629.25 113.75l-0.16 0.54-17.45 322.61c-66.14 9.88-127.87 5.37-171.72-1.17l0.07-0.34-17.41-321.52c13.53-2.53 23.15-4.09 23.15-4.09s3.27 51.22 80.5 51.27c76.49 0 80.5-51.27 80.5-51.27s9.35 1.5 22.52 3.97z" fill="#FCEB9D" p-id="1608"></path><path d="M422.58 113.87l17.41 321.52-36.9-6.81-14.8-307.71 34.29-7z" fill="#FCDB51" p-id="1609"></path><path d="M440 435.39l-0.07 0.34c-40-6-65.09-13.65-65.09-13.65h-0.05l-4.66-133.78-58.28 44.55-120.18-87L305.24 154a151.39 151.39 0 0 1 39.27-20.43c9.71-4.35 26.57-8.81 43.78-12.67l14.8 307.71z" fill="#FCEB9D" p-id="1610"></path></svg>',
        thumb_temp: require('../static/img/svg3.png'),
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 0, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 14,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/svg4.png'),
        thumb:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 980.76 1020.33"><defs><style>.cls-1,.cls-14{fill:none;}.cls-2{fill:#e3f0d5;}.cls-3{fill:#fff;}.cls-4{clip-path:url(#clip-path);}.cls-5{fill:#d2a597;}.cls-6{fill:#f4d5c1;}.cls-7{fill:#374968;}.cls-8{fill:#1664b2;}.cls-9{fill:#3390ff;}.cls-10{fill:#e4f3f9;}.cls-11{fill:#1a191e;}.cls-12{fill:#dc6965;}.cls-13{fill:#1e2c3f;}.cls-14{stroke:#374968;stroke-miterlimit:10;stroke-width:6px;}.cls-15{fill:#28395e;}.cls-16{fill:#1d2d49;}</style><clipPath id="clip-path"><circle class="cls-1" cx="488.69" cy="540.01" r="458.49"/></clipPath></defs><title>男生</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><circle class="cls-2" cx="490.38" cy="529.95" r="477.85"/><path class="cls-3" d="M490.38,1020.33A490.51,490.51,0,0,1,299.5,78.11,490.5,490.5,0,0,1,681.26,981.79,487.43,487.43,0,0,1,490.38,1020.33Zm0-955.71A465.45,465.45,0,0,0,309.26,958.71,465.45,465.45,0,0,0,671.5,101.18,462.42,462.42,0,0,0,490.38,64.62Z"/><g class="cls-4"><path class="cls-5" d="M250.44,396.87s-58.1-4.92-46.28,43.34c0,0,20.68,80.76,64,99.47,0,0,9.85,3,23.64,1S250.44,396.87,250.44,396.87Z"/><path class="cls-5" d="M744.49,414.6s58.11-4.92,46.29,43.33c0,0-20.68,80.76-64,99.48,0,0-9.85,3-23.63,1S744.49,414.6,744.49,414.6Z"/><polygon class="cls-5" points="451.23 656.88 453.18 698.24 514.48 742.56 556.33 728.77 560.22 645.06 451.23 656.88"/><path class="cls-6" d="M246.18,366.67S266.86,606,384.06,656.22c0,0,58.11,28.56,115.23,24.62,0,0,86.67-3.94,141.82-39.39,0,0,90.34-54.41,120.09-252.46,0,0-43.88-103.67-115.17-109,0,0-6.71,42.35-118,45.31l-43.52,15.75-21.33-15.75-45.94-13.79s-69.69-59.42-71.66-23c0,0-34.4,7.22-14.7-1.64C330.88,286.9,272.77,331.21,246.18,366.67Z"/><path class="cls-5" d="M764,415.39S743.92,347.86,717.32,338c0,0-27,22.42-43.78,46.06,0,0-9.85-35.46-47.27-25.61,0,0,2,26.59-1,30.53S512,348.61,512,348.61l-2,21.67S376.5,410.33,332.18,320.71c0,0-45.43,38.61-93.69,119.36,0,0-26.85-131.84-18-181.08l-23.63-8.86s14.77-76.82,75.83-129c0,0,11.82-13.79-7.88-28.56,0,0-12.8-20.68,133.94-34.47,0,0,100.46-64,229.48-41.37l2,25.61s58.11,3,67.95,14.77l-6.69,20.69s35.25,12.8,46.09,15.75L710,109.29S792.71,192,800.59,294.45L782.47,299S770.93,386.83,764,415.39Z"/><path class="cls-7" d="M786.48,217.42S696.79,326.29,547.09,325.3c0,0-172.35,3-236.37-142.8,0,0-41.7-39-55.49-89.26,0,0,40.68-29.48,136.25-25,0,0,74.85-62,239.33-45.3l-2.34,28.71,66.35,16.59S690.88,87,689.9,92.87l36.37,2.63L715.5,139.16S770.73,174.09,786.48,217.42Z"/><path class="cls-7" d="M782.47,208.1S701.72,312.5,552,311.51c0,0-172.36,3-236.37-142.8,0,0-40.59-29-54.38-79.21,0,0,47.33-35.13,135.14-35,0,0,74.85-62,239.32-45.3L633.4,37.88l66.35,16.58s-3.94,18.72-4.93,24.63l45.31,13.78-15.24,32.5S766.72,164.77,782.47,208.1Z"/><path class="cls-3" d="M392.92,693.16s-52.8,17.38-56.85,59.3L271.5,950.71s28.13,24,75.55,34.61c74.45,16.6,197.46,28,325.07-19.68,15.31-5.73,32.76-17,45.2-25.3l-54-208.57s-4.67-29.34-100.67-52.53l-56.05,32.92L449.11,681S442.28,675.55,392.92,693.16Z"/><path class="cls-8" d="M566.26,682.42s60.4-5.25,74.85,67L663.43,949l3.94,36.77s-60,17.72-85,19.33-68.06,2.58-79.34,2.3S451.42,1001.7,441,999s-91.78-22.07-94.2-31.33,26.77-207.71,32.27-224.81c6-18.72,6-49.9,75.58-61.72l58,34.73Z"/><path class="cls-9" d="M567.18,681.48s60.41-5.25,74.85,67l22.33,199.6,3,37.68S522.54,942.8,462.13,885s-78.36-140.28-78.36-140.28l-.43-2.85c.08.17-6.7-53.52,69.14-64.79l61.13,37.8Z"/><path class="cls-7" d="M429.49,682.52S427.06,761.7,450,780.74c0,0,24.95,29.55,62.38,28.89,0,0,61.72-6.57,75.5-74.85,0,0,5.68-32.24,1.09-50.63,0,0-26.69-6.16-31.29-6.16-2,0-50.56,33.62-50.56,33.62s-38.59-27.28-54.68-34.51C444.28,677.26,429.49,682.52,429.49,682.52Z"/><path class="cls-10" d="M452,718s-3.28,51.22,49.24,67c0,0,50.27,5.23,64.71-63.06L511.1,710.08Z"/><polygon class="cls-3" points="452.48 677.11 507.96 708.49 558.94 672.54 586.09 726.87 507.43 711.77 421.95 724.9 452.48 677.11"/><circle class="cls-11" cx="507.69" cy="740.13" r="9.52"/><ellipse class="cls-12" cx="498.52" cy="600.25" rx="41.86" ry="23.14"/><circle class="cls-13" cx="361.16" cy="471.74" r="24.62"/><circle class="cls-13" cx="642.8" cy="471.74" r="24.62"/><circle class="cls-14" cx="361.16" cy="471.74" r="92.55"/><circle class="cls-14" cx="642.8" cy="471.74" r="92.55"/><rect class="cls-7" x="452.27" y="471.17" width="98.49" height="10.46"/><polygon class="cls-7" points="768.3 416.66 739.69 465.66 731.45 459.22 764.03 415.39 768.3 416.66"/><polygon class="cls-7" points="245.11 396.99 269.25 445.99 277.49 439.55 250.49 396.84 245.11 396.99"/></g><path class="cls-15" d="M762.1,409.09S742,341.57,715.39,331.72c0,0-27,22.42-43.78,46.06,0,0-9.85-35.46-47.27-25.61,0,0,2,26.59-1,30.53s-113.26-40.38-113.26-40.38l-2,21.67S374.57,404,330.25,314.41c0,0-45.43,38.61-93.69,119.37,0,0-26.85-131.84-18-181.08l-23.64-8.87s14.78-76.82,75.84-129c0,0,11.82-13.79-7.88-28.56,0,0-12.8-20.69,133.94-34.47,0,0,100.46-64,229.48-41.37l2,25.61s58.11,2.95,68,14.77l-6.69,20.68s46.13,39.07,57,42L708.05,103s82.73,82.73,90.61,185.15l-18.12,4.53S769,380.53,762.1,409.09Z"/><path class="cls-16" d="M784.55,211.13S694.86,320,545.16,319c0,0-172.35,2.95-236.37-142.81,0,0-41.7-39-55.49-89.26,0,0,40.68-29.47,136.25-25,0,0,74.85-62,239.32-45.3l-2.33,28.71L692.89,62S689,80.67,688,86.58l27.3,16.13-1.69,30.16S768.79,167.8,784.55,211.13Z"/><path class="cls-7" d="M780.54,201.81s-80.76,104.4-230.46,103.41c0,0-172.35,3-236.37-142.8,0,0-40.58-29-54.37-79.21,0,0,47.32-35.14,135.13-35,0,0,74.85-62,239.33-45.3l-2.34,28.71,79.44,15S694.05,60,694.34,75L746.5,113.5,723,119.08S764.78,158.48,780.54,201.81Z"/></g></g></svg>',
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 0, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },{
        id: 15,
        width: 100,
        height: 100,
        thumb_temp: require('../static/img/svg5.png'),
        thumb:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980.76 1022.41"><defs><style>.cls-1{fill:#e5afa1;}.cls-2{fill:#8bbee6;stroke:#fff;stroke-miterlimit:10;stroke-width:24.42px;}.cls-3{fill:#fff;}.cls-4{fill:#5f3327;}.cls-5{fill:none;}.cls-6{fill:#bc9f26;}.cls-7{fill:#f4d5c1;}.cls-8{fill:#1e2c3f;}.cls-9{fill:#dc6965;}.cls-10{fill:#7a4a3d;}.cls-11{fill:#abc699;}.cls-12{fill:#6c8959;}.cls-13{fill:#ffda3e;}.cls-14{fill:#ffe67b;}</style></defs><title>旅游</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M449.19,535.43a2.64,2.64,0,0,0-4.43-2.82c-12.64,15.6-38.08,34.47-48.89,38.28C376.79,577.62,426.6,581.68,449.19,535.43Z"/><path class="cls-1" d="M534.12,535.43a2.64,2.64,0,0,1,4.43-2.82c12.64,15.6,38.08,34.47,48.89,38.28C606.52,577.62,556.71,581.68,534.12,535.43Z"/><circle class="cls-2" cx="490.38" cy="532.03" r="477.85"/><path class="cls-3" d="M490.38,1022.41A490.51,490.51,0,0,1,299.5,80.19,490.5,490.5,0,0,1,681.26,983.87,487.43,487.43,0,0,1,490.38,1022.41Zm0-955.71A465.46,465.46,0,0,0,309.26,960.8,465.45,465.45,0,0,0,671.5,103.27,462.43,462.43,0,0,0,490.38,66.7Z"/><path class="cls-1" d="M449.19,514.68a2.65,2.65,0,0,0-4.43-2.83c-12.64,15.6-38.08,34.47-48.89,38.29C376.79,556.87,426.6,560.93,449.19,514.68Z"/><path class="cls-1" d="M534.12,514.68a2.65,2.65,0,0,1,4.43-2.83c12.64,15.6,38.08,34.47,48.89,38.29C606.52,556.87,556.71,560.93,534.12,514.68Z"/><path class="cls-4" d="M258.65,533.83s-9.4,221.75,5.81,243.51c9.06,13,5,34.16,3.15,39.39-.82,2.4,6.1-.22,7,.93,2.68,3.38,7.37,20.15,8.56,16.11,1.32-4.49,15.56-21.41,26.1-13.92,3.51,2.5,3.23-29.43,8.82-14.53.61,1.65-8.2-23.79-3.38-34.28,10.56-23,8.68-168.41,7.89-174.06a357.67,357.67,0,0,1-2.53-42.05c.07-15.15,1.33-66.62-1.42-61.32S264.26,451.93,258.65,533.83Z"/><path class="cls-4" d="M638.67,528s41.8,218,61.61,235.66c11.8,10.54,12.67,32.11,12.13,37.61-.26,2.53,5.88-1.61,7-.7,3.39,2.67,11.8,17.91,12,13.71.26-4.68,10.22-24.41,22.2-19.54,4,1.62-3.62-29.39,5.24-16.18,1,1.46-13.44-21.27-11.16-32.58,5-24.8-30.25-165.9-32.32-171.22a357.88,357.88,0,0,1-12.13-40.34c-3.41-14.76-14-65.14-15.47-59.36S625.31,447,638.67,528Z"/><path class="cls-5" d="M556.07,682.14a366.55,366.55,0,0,1,37,11.57A72,72,0,0,0,556.07,682.14Z"/><path class="cls-6" d="M0,396.68s801.31-26.86,956.4-95.5L812.92,210S146.13,196.85,0,396.68Z"/><polygon class="cls-1" points="438.8 635.33 436.69 676.74 432.57 721.01 512.05 792.24 565.05 712.14 547.79 623.51 438.8 635.33"/><path class="cls-1" d="M732.06,393.05s58.11-4.92,46.29,43.34c0,0-20.68,80.75-64,99.47,0,0-9.85,2.95-23.63,1S732.06,393.05,732.06,393.05Z"/><path class="cls-1" d="M238,375.32s-58.11-4.92-46.29,43.34c0,0,20.68,80.76,64,99.47,0,0,9.85,3,23.64,1S238,375.32,238,375.32Z"/><path class="cls-7" d="M233.75,345.12s20.68,239.32,137.88,289.55c0,0,58.11,28.56,115.23,24.62,0,0,86.67-3.94,141.82-39.39,0,0,90.34-54.41,120.09-252.46,0,0-43.88-103.67-115.17-109,0,0,4.82,26.37-106.47,29.32l-48.37-4.36H435.92L404.81,290s-69.69-59.42-71.66-23c0,0-34.4,7.22-14.7-1.64C318.45,265.35,260.34,309.67,233.75,345.12Z"/><ellipse class="cls-8" cx="393.59" cy="463.85" rx="38.98" ry="23.97"/><ellipse class="cls-9" cx="494.09" cy="578.7" rx="41.86" ry="23.14"/><path class="cls-8" d="M347.24,442.61l15.25,11.47c3.09,2.32,6.08-2.89,3-5.18l-15.25-11.47c-3.09-2.32-6.09,2.89-3,5.18Z"/><path class="cls-8" d="M426.34,432l-15,12.54c-3,2.49,1.3,6.71,4.24,4.25l15-12.55c3-2.48-1.3-6.7-4.24-4.24Z"/><path class="cls-8" d="M382.18,431.86l2.07,15c.53,3.81,6.31,2.19,5.79-1.59l-2.07-15c-.53-3.81-6.31-2.19-5.79,1.59Z"/><ellipse class="cls-8" cx="594.63" cy="463.85" rx="38.98" ry="23.97"/><path class="cls-8" d="M548.28,442.61l15.26,11.47c3.08,2.32,6.08-2.89,3-5.18l-15.25-11.47c-3.09-2.32-6.08,2.89-3,5.18Z"/><path class="cls-8" d="M627.38,432l-15,12.54c-3,2.49,1.3,6.71,4.24,4.25l15-12.55c3-2.48-1.3-6.7-4.25-4.24Z"/><path class="cls-8" d="M583.23,431.86l2.07,15c.52,3.81,6.3,2.19,5.78-1.59l-2.07-15c-.52-3.81-6.31-2.19-5.78,1.59Z"/><path class="cls-8" d="M332.84,411.84c27.31-17.69,65.14-17.22,94.11-4.69,3.5,1.52,6.56-3.65,3-5.18-22.14-9.57-46.23-12.4-69.84-7.11-10.37,2.32-21.32,6-30.33,11.8-3.23,2.09-.23,7.28,3,5.18Z"/><path class="cls-8" d="M541.13,411.84c27.31-17.69,65.15-17.22,94.11-4.69,3.51,1.52,6.57-3.65,3-5.18-22.14-9.57-46.22-12.4-69.83-7.11-10.38,2.32-21.33,6-30.33,11.8-3.23,2.09-.23,7.28,3,5.18Z"/><path class="cls-1" d="M739.6,405s-21.23,28.2-39.1,5.63c-6.69-8.44-3.2-77.43-13.3-74.13-21,6.86-22.19-39.5-24.63-48.74-16.31-61.84-32.9,60.37-72.59,55.58l-64.15-8.72c-13.13-1.59-32.65-37.05-58-33.82-20.08,2.57-23.65,56.6-65.89,56.7-27.76.07-79.78,47.37-97.17,69.59-18.08,23.1-65-66.61-83.7,30.63,0,0-68.79-96.13-5.13-204.46l-23-8.86s14.38-76.82,73.82-129c0,0-20.13-49.24,122.72-63l124.15-8.68c64.9-4.54,129,16.93,178.82,59.89h0S772.32,160.29,780,262.72L760.66,375.18S746.31,376.46,739.6,405Z"/><path class="cls-10" d="M735.34,392s-21.66,28.19-39.9,5.62c-6.81-8.44-3.26-77.42-13.56-74.12-21.41,6.86-22.64-39.51-25.13-48.75-16.64-61.83-33.57,60.38-74.06,55.58l-65.45-8.72c-13.4-1.58-33.32-37.05-59.16-33.81-20.49,2.56-24.14,56.6-67.23,56.7-28.32.06-81.4,47.37-99.14,69.59-18.44,23.1-66.28-66.61-85.4,30.63,0,0-97.76-81.22-32.8-189.55l4.09-23.77s14.67-76.82,75.32-129c0,0-20.54-49.24,125.21-63l126.66-8.69a255.54,255.54,0,0,1,182.45,59.9h0s81.49,56.71,89.31,159.13l2,147.93S742.19,363.43,735.34,392Z"/><path class="cls-10" d="M626.2,54.18s-19,190.66,24.52,213.17c0,0-.73,69.87,33.9,65.81s-5.45,100.75,53.82,68.5c0,0,22.62-22.06,45.69,6.17S799.48,32.38,626.2,54.18Z"/><path class="cls-7" d="M619.94,980c8.22-2.48,38.86-12.35,87.94-36.51L657.72,752.27a82,82,0,0,0-29.16-44.4c-9.3-7.17-26.72-14.57-43.81-23.25,0,0-22-7.88-26.59-7.88-.89,0-8.54,27.51-66.9,29.33-38.26,1.19-53.59-25.81-54.58-29.33-6.51.12-41.47,10.86-59.09,17.14,0,0-38.41,13.73-56.85,59.3L309.26,960.8C436.86,1016,551.19,997.85,619.94,980Z"/><path class="cls-11" d="M391.61,689.13,438,758.46c3.76,6.15,39.36,30.67,76.28,25.06,25.88-3.93,41.08-10.36,58.88-36.33a76.38,76.38,0,0,0,11.78-27.82l6.49-31.44s36.88,14.89,47.46,29.41l8.5,151.1L655.42,967S523.68,1027.26,364,980L404.17,859.8,351.8,709.9S368.75,693.71,391.61,689.13Z"/><path class="cls-12" d="M351.8,709.9l8.93,182L364,980c167.66,46.51,291.41-13,291.41-13S659,955,652.25,928.34C516,945,351.8,709.9,351.8,709.9Z"/><path class="cls-13" d="M0,396.68s618-270.63,956.4-95.5C956.4,301.18,458.77-188.58,0,396.68Z"/><path class="cls-13" d="M150.38,209.16S221.24-91.28,642.06,28c95,26.93,170.39,163,162.13,182L240.36,272.09c-76,2.83-87-9.36-88.54-30.34-.7-9.31.45-20.36-1.44-32.59Z"/><path class="cls-14" d="M819.41,203s-254.36-47.25-701.5,66.41l33.91-27.66s241.77-98,641.73-62.75Z"/><polygon class="cls-3" points="173.89 175.03 228.69 196.38 280.35 172.47 307.5 224.8 228.84 209.7 143.35 222.83 173.89 175.03"/><polygon class="cls-3" points="228.84 203.5 174.83 302.3 212.93 283.5 228.84 203.5"/><polygon class="cls-3" points="227.9 203.5 269.32 302.3 240.09 283.5 227.9 203.5"/><polygon class="cls-13" points="452.7 948.52 435.97 951.07 428.59 966.3 420.99 951.18 404.22 948.87 416.25 936.96 413.27 920.3 428.31 928.07 443.24 920.09 440.5 936.79 452.7 948.52"/><polygon class="cls-13" points="518.33 842.59 501.6 845.15 494.21 860.38 486.61 845.25 469.85 842.94 481.88 831.04 478.9 814.38 493.94 822.14 508.86 814.16 506.12 830.86 518.33 842.59"/><polygon class="cls-13" points="552.09 956.46 535.36 959.01 527.98 974.24 520.38 959.12 503.61 956.8 515.65 944.9 512.66 928.24 527.7 936.01 542.63 928.02 539.89 944.73 552.09 956.46"/><polygon class="cls-13" points="577.5 897.3 566.82 898.93 562.11 908.65 557.26 899 546.56 897.52 554.24 889.92 552.34 879.29 561.93 884.25 571.46 879.15 569.71 889.81 577.5 897.3"/><polygon class="cls-13" points="605.14 794.09 594.19 795.76 589.36 805.73 584.38 795.83 573.41 794.32 581.28 786.52 579.33 775.62 589.18 780.71 598.95 775.48 597.15 786.41 605.14 794.09"/><polygon class="cls-13" points="435.49 815.35 424.81 816.98 420.1 826.7 415.25 817.05 404.54 815.57 412.23 807.97 410.32 797.34 419.92 802.3 429.45 797.2 427.7 807.86 435.49 815.35"/></g></g></svg>',
        x:0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 0, // 0 svg 1 图片
        locked: false,
        collected: false,
        haveCollectBtn:true,
      },
      ], // 素材列表
      bgTypeData:'',// 背景类型数据
      bgList:[{
        id:1,
        url:require('../static/background/1.jpg')
      },{
        id:2,
        url:require('../static/background/2.jpg')
      },{
        id:3,
        url:require('../static/background/3.jpg')
      },{
        id:4,
        url:require('../static/background/4.jpg')
      },{
        id:5,
        url:require('../static/background/5.jpg')
      },{
        id:6,
        url:require('../static/background/6.jpg')
      },
      ],// 背景列表数据
      bgActiveTypeId:null,// 当前高亮的背景类型id
      uploadList:[],// 用户上传的图片数据
      checkList:[],// 用户选择删除的图片id集合
      manageUpload:true,  // 上传图片管理 是否显示选择框 true 管理 false 删除
      uploading:false,  // 上传文件loading
      uploadInit:0,// 已上传文件个数
      fileList: [], // 上传文件列表
      needUpVipLevel:[],//需要升级会员才能使用的素材id集合
      needUpVipLevelBg:[],// 需要升级会员才能使用的背景图id集合
      canSetTop: false, //是否可以点击置顶
      canSetBottom: false, // 是否可以点击置底
      canSetLast: false, // 是否可以点击上移一层
      canSetNext: false, // 是否可以点击下移一层
      canLocked: false, // 是否可以点击锁定
      canCollected: false, // 是否可以点击收藏
      canDelete: false, // 是否可以点击删除
      canFlipX: false, // 是否可以点击横向翻转
      canFlipY: false, // 是否可以点击纵向翻转
      canCopy:false,// 是否可以点击复制
      canSlide: false, // 是否可以设置透明度
      haveCollectBtn:false,// 是否有收藏按钮
      canSetTextStyle:false,// 是否显示除开设置字体库和字体大小以外的样式
      fontIsBold:false,// 当前字体元素是否加粗
      fontIsItalic:false,// 当前字体元素是否斜体
      fontIsUnderline:false,// 当前字体元素是否有下划线
      fontIsDelLine:false,// 当前字体元素是否有删除线
      fontHaveBorder:false,// 当前字体元素是否有描边
      alreadyLoadFont:[],// 已经加载的字体库
      fontLoading:false,// 字体库加载效果
      strokeColor:'#000',// 当前字体元素描边颜色
      strokeWidth:0,// 当前字体元素描边宽度
      fontColor:'#000',// 当前字体元素颜色
      fontOpacity:100,// 当前字体元素透明度
      fontSize:12,//当前字体元素大小
      fontFamily:'',// 当前字体元素字体库
      fontFamilyId:'',// 当前字体元素的字体库id
      textAlign:'left',// 文本对齐方式  默认左对齐
      letterSpacingValue:0,// 当前字体元素字间距
      lineHeightValue:0,// 当前字体元素行间距
      myId:1,//自定义id 用于新增文字时  没有id匹配
      isShowRightTextStyle:false,// 是否显示右侧文字特效列表
      eleLocked: false, // 当前选择的对象 是否被锁定
      eleCollected: false, // 当前选择的对象 是否被收藏
      opacityValue: 100, // 当前操作元素的透明度  默认100
      rotating: false, // 当前元素正在旋转
      angle: 0, // 元素旋转的角度
      angleX: 0, // 元素旋转显示容器的坐标 x
      angleY: 0, // 元素旋转显示容器的坐标 y
      moving:false,// 当前元素正在移动
      eleX:0,// 当前元素X坐标
      eleY:0,// 当前元素Y坐标
      moveBoxLeft:0,//显示当前元素坐标点容器的X坐标
      moveBoxTop:0,//显示当前元素坐标点容器的Y坐标
      hoverObj: null, //鼠标进入素材时的hover对象
      canvasObj: null, // 画布对象
      canvasWidth:600,// 画布宽度
      canvasHeight:600,// 画布高度
      isDragging:false,// 是否正在被拖拽
      selection:true,// 元素是否可以被选择
      lastPosX:0,
      lastPosY:0,
      mouseFrom: {},
      mouseTo: {},
      zoomPercentage:100,// 缩放百分比
      zoom: window.zoom ? window.zoom : 1,
      zoomPoint: new fabric.Point(0, 0), //初始时缩放原点的位置设为（0,0），这是页面的左上顶点
      lastzoomPoint: { x: 0, y: 0 }, //初始时，前一次缩放原点同样为(0,0)
      lastmousePoint: { x: 0, y: 0 }, //进行缩放，需要对此刻缩放位置进行保存，来计算出缩放原点，此刻初始时设为0,0
      lastzoom: 1, //表示为上一次的缩放倍数，此刻设为1
      relativeMouseX: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
      relativeMouseY: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
      tabPosition: "left", // 左侧素材模块位置
      list: [
        {
          id: 3,
          width: 100,
          height: 100,
          thumb:
            "http://www.sczsc.cn/uploads/images/20200925/6aff244682d37b6c0c280f9efe6d4f80.png",
          // imgUrl: require("../assets/image/a.svg"),
          x: 50,
          y: 120,
          angle: 0,
          opacity: 1,
          flipX: false,
          flipY: false,
          materialType: "img", // 大类 类型
          thumb_type: 1, // 0 svg 1 图片
          locked: false,
          collected: false,
        },
        {
          id: 1,
          width: 100,
          height: 50,
          thumb:
            '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1600414312657" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1142" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M813.056 232.448L621.568 121.856c-43.008-24.576-113.664-24.576-156.672 0L274.432 232.448c-43.008 24.576-43.008 65.536 0 91.136l191.488 110.592c43.008 24.576 113.664 24.576 156.672 0l190.464-110.592c44.032-25.6 43.008-66.56 0-91.136" fill="#330867" p-id="1143"></path><path d="M274.432 323.584c-43.008-24.576-44.032-65.536 0-91.136l190.464-110.592c43.008-24.576 113.664-24.576 156.672 0l191.488 110.592c43.008 24.576 44.032 65.536 0 91.136L623.616 434.176c-43.008 24.576-113.664 24.576-156.672 0L274.432 323.584m545.792-95.232L628.736 117.76c-47.104-27.648-123.904-27.648-171.008 0L267.264 228.352c-47.104 27.648-47.104 71.68 1.024 99.328l191.488 110.592c47.104 27.648 123.904 27.648 171.008 0L821.248 327.68c47.104-27.648 46.08-71.68-1.024-99.328" fill="#330867" p-id="1144"></path><path d="M890.88 972.8H196.608v-31.744c0-101.376 81.92-183.296 183.296-183.296H706.56c102.4 0 184.32 81.92 184.32 183.296V972.8z" fill="#66C1FF" p-id="1145"></path><path d="M906.24 988.16H181.248v-47.104c0-109.568 89.088-198.656 198.656-198.656H706.56c109.568 0 198.656 89.088 198.656 198.656v47.104z m-694.272-30.72h663.552v-16.384c0-92.16-75.776-167.936-167.936-167.936h-327.68c-92.16 0-167.936 75.776-167.936 167.936v16.384z" fill="#330867" p-id="1146"></path><path d="M746.496 464.896H342.016c-12.288 0-21.504-10.24-21.504-21.504V348.16c0-12.288 10.24-21.504 21.504-21.504h404.48c12.288 0 21.504 10.24 21.504 21.504v95.232c0 11.264-9.216 21.504-21.504 21.504z" fill="#9555B5" p-id="1147"></path><path d="M746.496 480.256H342.016c-20.48 0-36.864-16.384-36.864-36.864V348.16c0-20.48 16.384-36.864 36.864-36.864h404.48c20.48 0 36.864 16.384 36.864 36.864v95.232c0 19.456-16.384 36.864-36.864 36.864zM342.016 340.992c-4.096 0-6.144 3.072-6.144 6.144v95.232c0 4.096 3.072 6.144 6.144 6.144h404.48c4.096 0 6.144-3.072 6.144-6.144V348.16c0-4.096-3.072-6.144-6.144-6.144H342.016z" fill="#330867" p-id="1148"></path><path d="M667.648 790.528l-124.928 71.68-122.88-71.68V618.496h247.808z" fill="#FFE08A" p-id="1149"></path><path d="M542.72 880.64l-138.24-80.896V603.136h278.528v196.608L542.72 880.64z m-107.52-98.304L542.72 844.8l109.568-63.488V633.856H435.2v148.48z" fill="#330867" p-id="1150"></path><path d="M568.32 731.136h-49.152c-77.824 0-141.312-63.488-141.312-141.312V483.328c0-10.24 8.192-18.432 18.432-18.432h293.888c10.24 0 18.432 8.192 18.432 18.432v107.52c1.024 77.824-62.464 140.288-140.288 140.288z" fill="#FFE08A" p-id="1151"></path><path d="M568.32 746.496h-49.152c-86.016 0-156.672-70.656-156.672-156.672V483.328c0-18.432 15.36-33.792 33.792-33.792h293.888c18.432 0 33.792 15.36 33.792 33.792v107.52c1.024 86.016-69.632 155.648-155.648 155.648z m-171.008-266.24c-2.048 0-3.072 1.024-3.072 3.072v107.52C394.24 660.48 450.56 716.8 520.192 716.8h49.152c69.632 0 125.952-56.32 125.952-125.952V483.328c0-2.048-1.024-3.072-3.072-3.072H397.312z" fill="#330867" p-id="1152"></path><path d="M561.152 706.56h-60.416c-7.168 0-13.312-6.144-13.312-13.312 0-7.168 6.144-13.312 13.312-13.312h60.416c7.168 0 13.312 6.144 13.312 13.312 0 7.168-6.144 13.312-13.312 13.312z" fill="#FFE08A" p-id="1153"></path><path d="M561.152 679.936h-60.416c-7.168 0-13.312 6.144-13.312 13.312s6.144 13.312 13.312 13.312h60.416c7.168 0 13.312-6.144 13.312-13.312s-6.144-13.312-13.312-13.312z" fill="#330867" p-id="1154"></path></svg>',
          // imgUrl: require("../assets/image/a.svg"),
          x: 100,
          y: 150,
          angle: 0,
          opacity: 1,
          flipX: false,
          flipY: false,
          materialType: "img",
          thumb_type: 0,
          locked: false,
          collected: false,
        },
        {
          id: 0,
          width: 100,
          height: 100,
          thumb:
            "http://swt-app.oss-cn-chengdu.aliyuncs.com/swt_backstage/newindex%20(5).png",
          // imgUrl: require("../assets/image/a.svg"),
          x: 50,
          y: 180,
          angle: 0,
          opacity: 0.6,
          flipX: false,
          flipY: false,
          materialType: "img", // 大类 类型
          thumb_type: 1, // 0 svg 1 图片
          locked: false,
          collected: false,
        },
      ],
      list:[],
      imgControlTab:'image',// 控制图片tab 切换
      page:1,
      limit:20,
      totalPage:0,
      leftLoading:false,  // 左侧列表加载loading
      tplLoading: false,  // 加载模板loading
      showTips:false, // 缩放提示
      brightness:0,//亮度
      contrast:0,// 对比度
      saturation:0,// 饱和度
      hue:0,// 色调
      blur:0,// 模糊
       systemFilterList:[
        {filterName:'原图',brightness:0,contrast:0,saturation:0,hue:0,blur:0},
        {filterName:'胶片',brightness:26,contrast:-20,saturation:11,hue:0,blur:0},
        {filterName:'蓝调',brightness:4,contrast:28,saturation:-41,hue:70,blur:0},
        {filterName:'日系',brightness:10,contrast:4,saturation:20,hue:70,blur:-5},
        {filterName:'午茶',brightness:10,contrast:45,saturation:6,hue:0,blur:-4},
        {filterName:'褪色',brightness:15,contrast:-16,saturation:-50,hue:0,blur:0},
        {filterName:'校园',brightness:63,contrast:-16,saturation:-9,hue:0,blur:-8},
        {filterName:'盛夏',brightness:10,contrast:14,saturation:18,hue:-46,blur:0},
        {filterName:'怀旧',brightness:54,contrast:13,saturation:-50,hue:-79,blur:-19},
        {filterName:'森林',brightness:11,contrast:-14,saturation:-18,hue:14,blur:0},
        {filterName:'玫瑰',brightness:0,contrast:55,saturation:-28,hue:-73,blur:-14},
        {filterName:'黑白',brightness:0,contrast:20,saturation:-100,hue:0,blur:0},
      ],// 系统预置滤镜
      showPop:false,// 是否显示
      sizeList:[{   // 尺寸列表数据
        name:'手机海报',
        width:640,
        height:1008,
      },{
        name:'长图海报',
        width:800,
        height:2000,
      },{
        name:'每日一签',
        width:720,
        height:1280,
      },{
        name:'横板海报',
        width:900,
        height:500,
      },{
        name:'方形海报',
        width:800,
        height:800
      }],
      currentActiveSizeIndex:null,// 当前选择的尺寸索引
    };
  },
  //监听属性 类似于data概念
  computed: {
      noMore () {
        return this.page >=  this.totalPage
      },
      disabled () {
        return this.leftLoading || this.noMore
      }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getX(o) {
      return (
        this.lastzoomPoint.x +
        (o.pointer.x - this.zoomPoint.x - this.relativeMouseX) /
          this.canvasObj.getZoom()
      )
    },
    getY(o) {
      return (
        this.lastzoomPoint.y +
        (o.pointer.y - this.zoomPoint.y - this.relativeMouseY) /
          this.canvasObj.getZoom()
      )
    },
    // 缩放后重置原点
    resetOriginAfterZoom() {
      this.lastzoomPoint.x =
        this.lastzoomPoint.x +
        (this.zoomPoint.x - this.lastmousePoint.x - this.relativeMouseX) /
          this.lastzoom
      this.lastzoomPoint.y =
        this.lastzoomPoint.y +
        (this.zoomPoint.y - this.lastmousePoint.y - this.relativeMouseY) /
          this.lastzoom

      this.lastmousePoint.x = this.zoomPoint.x
      this.lastmousePoint.y = this.zoomPoint.y
      this.lastzoom = this.zoom

      this.tempmouseX = this.relativeMouseX
      this.tempmouseY = this.relativeMouseY
      this.relativeMouseX = 0
      this.relativeMouseY = 0
    },
    load () {
      this.tplLoading = true
      setTimeout(() => {
        this.count += 2
        this.tplLoading = false
      }, 2000)
    },
    // 切换左侧模块、素材、文字、背景、上传
    changeTab(tab, e) {
      let that = this;
      const tabName = tab.name;
      that.activeTabName = tabName;
    },
    // 切换操作图片的tab功能栏
    changeImgTabCtrl(str){
      let that= this;
      that.imgControlTab = str;
    },
    // 切换模板二级菜单 0推荐模板 1我的模板
    changeTplTab(num){
      let that = this;
      that.tplActiveTab = num;
    },
    // 获取字体样式列表数据
    getFontStyleList(){
      let that = this;
      let params = {
        fun:'fontStyleList',
      }
      DoRequest('api',params).then(res=>{
        console.log(res)
        if(res){
          if(res.data.code==200){
            that.fontStyleList = res.data.data;
          }else{
            that.$message.warning(res.data.msg)
          }
        }else{
            that.$message.error('请求失败,请稍后再试');
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    // 获取字体库列表
    getFontFamilyList(){
      let that = this;
      let params = {
        fun:'getFontList'
      }
      DoRequest('api',params).then(res=>{
        console.log(res)
        if(res){
          if(res.data.code==200){
            that.fontFamilyList = res.data.data
          }else{
            that.$message.warning(res.data.msg);
          }
        }else{
          that.$message.error('获取字体库资源失败')
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //点击内置字体样式 添加到画布上
    setSystemFontStyleToCanvas(id){
      let  that = this;
      let params = {
        fun:'getSingleFontStyle',
        id:id,
      }
      DoRequest('api',params).then(res=>{
        console.log(res);
        if(res){
          if(res.data.code==200){
            var textElement = {
              mid: 'diy'+that.myId,
              width: 100,
              height: 100,
              name: "文本1",
              textConent: "双击修改文本",
              x: 0,
              y: 0,
              angle: 0,
              opacity: 1,
              flipX: false,
              flipY: false,
              materialType: "text",
              locked: false,
              collected: false,
              fontWeight:res.data.data.font_weight,
              // shadow:res.data.data.shadow_color+" "+res.data.data.shadow_x+" "+res.data.data.shadow_y+" "+res.data.data.shadow_r,
              stroke:res.data.data.stroke_color,
              strokeWidth:res.data.data.stroke_width,
              fill:res.data.data.font_color,
              charSpacing:res.data.data.char_spacing,
              linethrough:res.data.data.linethrough==0?false:true,
              underline:res.data.data.underline==0?false:true,
              overline:res.data.data.overline==0?false:true,
              fontStyle:res.data.data.italic,
              fontSize:30,
              fontFamily:null,
              fontFamilyId:null,
              lineHeight:1,
            }
            that.renderElement(textElement,'max');
            that.myId++;
            that.list.push(textElement);
          }else{
            that.$message.warning(res.data.msg);
          }
        }else{
          that.$message.error('操作失败,请稍后再试')
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    // 点击右侧文字特效 设置
    setThisStyleToText(id){
      let that = this;
      let currentElements = that.canvasObj.getActiveObjects();
      if(id=='default'){
        currentElements.map(function(item,inex){
          if(item.materialType=='text'){
            item.set({
              fontWeight:'normal',
              shadow:null,
              stroke:'#000',
              strokeWidth:0,
              fill:'#000',
              charSpacing:0,
              linethrough:false,
              underline:false,
              overline:false,
              fontStyle:'',
              lineHeight:1,
            })
          }
        })
        that.canvasObj.renderAll();
      }else{
        let params = {
          fun:'getSingleFontStyle',
          id:id,
        }
        DoRequest('api',params).then(res=>{
          console.log(res)
          if(res){
            if(res.data.code==200){
                currentElements.map(function(item,inex){
                  if(item.materialType=='text'){
                    console.log(item);
                    item.set({
                      fontWeight:res.data.data.font_weight,
                      // shadow:res.data.data.shadow_color+" "+res.data.data.shadow_x+" "+res.data.data.shadow_y+" "+res.data.data.shadow_r,
                      stroke:res.data.data.stroke_color,
                      strokeWidth:res.data.data.stroke_width,
                      fill:res.data.data.font_color,
                      charSpacing:res.data.data.char_spacing,
                      linethrough:res.data.data.linethrough==0?false:true,
                      underline:res.data.data.underline==0?false:true,
                      overline:res.data.data.overline==0?false:true,
                      fontStyle:res.data.data.italic,
                      lineHeight:1,
                    })
                  }
                })
                that.canvasObj.renderAll();
            }else{
              that.$message.warning(res.data.msg);
            }
          }else{
            that.$message.error('操作失败,请稍后再试');
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    /**
     * @author: zs
     * @remark: 点击素材 将素材添加至画布上
     * @Date: 2020-09-24 16:04:03
     * @param {id}  素材id
     * @return 无
     */
    takeThisToCanvas(index) {
      let that = this;
      that.centerLoading = true;
      setTimeout(function(){
        that.centerLoading = false;
        let eleData =that.materialList[index];
        eleData.mid = 'diy'+that.myId;
        that.renderElement(eleData, "max");
        that.myId++;
        that.list.push(eleData);
        // 判断当前添加的素材是否需要升级会员 是则提示
        // let myLevel = JSON.parse(localStorage.getItem('personalCache')).level;
        // let currentMtlLv = res.data.data.level;
        // if(myLevel<currentMtlLv){
        //   that.needUpVipLevel.push(id);
        // }
      },800)
    
    },
    /**
     * @author: zs
     * @remark: 收藏素材
     * @Date: 2020-09-25 12:22:57
     * @param {id} 被收藏素材的id
     * @return
     */
    collectThis(id,index) {
      let that = this;
      that.materialList[index].collected = true;
      // 判断画布内容是否存在当前元素 若存在 设置为已收藏
      let canvasAllEle = _.filter(
        that.canvasObj.getObjects(),
        function (o) {
          return o.id != undefined;
        }
      );
      let activeCanvasElement = that.canvasObj.getActiveObject();
      let indexInAll = _.findIndex(canvasAllEle, function (o) {
        return o.id == id;
      });
      if (index != -1) {
        if(canvasAllEle.length>0){
          canvasAllEle[indexInAll].collected = true;
        }
        if (activeCanvasElement && activeCanvasElement.id == id) {
          activeCanvasElement.collected = true;
          that.eleCollected = true;
        }
      }
    },
    /**
     * @author: zs
     * @remark: 取消收藏素材
     * @Date: 2020-09-25 14:31:38
     * @param {id} 被取消收藏的素材id
     * @return {type}
     */
    unCollectThis(id,index) {
      let that = this;
      that.materialList[index].collected = false;
      // 判断画布内容是否存在当前元素 若存在 设置为取消收藏
      let canvasAllEle = _.filter(
        that.canvasObj.getObjects(),
        function (o) {
          return o.id != undefined;
        }
      );
      let activeCanvasElement = that.canvasObj.getActiveObject();
      console.log(activeCanvasElement);
      let indexInAll = _.findIndex(canvasAllEle, function (o) {
        return o.id == id;
      });
      if (index != -1) {
        if(canvasAllEle.length>0){
          canvasAllEle[indexInAll].collected = false;
        }
        if (activeCanvasElement && activeCanvasElement.id == id) {
          activeCanvasElement.collected = false;
          that.eleCollected = false;
        }
      }
    },
    // 点击获取背景图详细信息并设置为画布背景图
    getBgImg(index){
      let that = this;
      let url = that.bgList[index].url;
      that.setCanvasBg(url,'img')
      
    },
    // 设置画布的背景色或背景图
    setCanvasBg(value,type){
      let that = this;
      // 设置之前 先清楚之前设置的背景图或颜色
      that.canvasObj.backgroundImage = 0;
      that.canvasObj.backgroundColor = ''
      if(type=='img'){
        that.canvasObj.setBackgroundImage(value+'?time='+new Date().getTime(),function(oImg){
          console.log(oImg.width);
          console.log(oImg.height);
          that.canvasObj.backgroundImage.set({
            // width:that.canvasObj.width,
            // height:that.canvasObj.height,
            scaleX: that.canvasObj.width/oImg.width,
            scaleY: that.canvasObj.height/oImg.height
          })
          that.canvasObj.renderAll();
        },{
            crossOrigin:'anonymous',
        });
      }else{
        that.canvasObj.setBackgroundColor(value, function(){
          that.canvasObj.renderAll();
        });
      }
    },
    //获取自己上传的图片数据
    getMyUploadList(page=1,limit=20){
      let  that = this;
      that.leftLoading = true;
      let params = {
        fun:'uploadList',
        page:page,
        limit:limit,
      }
      DoRequest('api',params).then(res=>{
        console.log(res)
        that.leftLoading = false;
        if(res){
          if(res.data.code==200){
            that.$set(that.uploadList,page-1,res.data.data.data);
            that.totalPage = Math.ceil(res.data.data.count/limit);
          }else{
            that.$message.warning(res.data.msg);
          }
        }else{
          that.$message.error('请求失败,请稍后再试。')
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    // 上传图片
    changeFile(file,fileList){
      let that = this;
      that.uploading =true;
      let params = {
        fun:'uploadMaterial',
      }
      let myFormData = {
        file:file.raw,
      }
      postFile('api',myFormData,params).then(res=>{
        console.log(res)
        that.uploadInit++
        if(that.uploadInit==fileList.length){
          that.uploading = false;
          that.uploadInit = 0;
          that.$message.success('上传完成');
          that.getMyUploadList(that.page,that.limit);
        }
        if(res){
          if(res.data.code==200){
           
          }else{
            that.$message.warning(res.data.msg)
          }
        }else{
          that.$message.error('请求失败,请稍后再试')
        }
      }).catch(err=>{
        console.log(err);
        that.uploadInit++
        if(that.uploadInit==fileList.length){
          that.uploading = false;
          that.uploadInit = 0;
          that.$message.success('上传完成');
          that.getMyUploadList(that.page,that.limit);
        }
      })
    },
    //切换我的上传管理状态 管理/删除 
    toggleUploadStatus(){
      let that = this;
      that.manageUpload = !that.manageUpload;
      that.checkList = [];
    },
    // 将我的上传图片添加至画布
    takeMyUploadToCanvas(id,thumb){
      let that = this;
       let newEleObj = {
        id: id,
        mid:'diy'+that.myId,
        width: 100,
        height: 100,
        thumb:thumb,
        x: 0,
        y: 0,
        angle: 0,
        opacity: 1,
        flipX: false,
        flipY: false,
        materialType: "img", // 大类 类型
        thumb_type: 1, // 0 svg 1 图片
        locked: false,
        collected: true,
        haveCollectBtn:false,
      };
      that.renderElement(newEleObj, "max");
      that.myId++;
      that.list.push(newEleObj);
    },
    // 删除上传的图片
    delMyUpload(){
      let that = this;
      that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.del();
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 删除
    del(){
      let that= this;
      let params = {
        fun:'delUserUpload',
        ids:that.checkList.toString(),
      }
      DoRequest('api',params).then(res=>{
        if(res){
          if(res.data.code==200){
            that.$message.success(res.data.msg);
            that.getMyUploadList(1,that.limit);
          }else{
            that.$message.warning(res.data.msg);
          }
        }else{  
          that.$message.error('请求失败,请稍后再试')
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    // 在画布上添加正文
    addTextToCanvas(){
      let that = this;
      let textObj = {
          mid: 'diy'+that.myId,
          width: 100,
          height: 100,
          name: "文本1",
          textConent: "这是文字内容",
          x:0,
          y:0,
          angle: 0,
          opacity: 1,
          flipX: false,
          flipY: false,
          materialType: "text",
          thumb_type: "text",
          locked: false,
          collected: false,
          fontWeight:'normal',
          shadow:null,
          stroke:null,
          strokeWidth:0,
          fill:'#000',
          charSpacing:0,
          linethrough:false,
          underline:false,
          overline:false,
          fontStyle:'',
          fontSize:16,
          fontFamily:null,
          fontFamilyId:null,
          lineHeight:1,
      };
      that.renderElement(textObj,'max')
      that.myId++;
      that.list.push(textObj);
    },
    // 设置字体的各种样式
    /*
    0 描边颜色 1字体颜色 2描边宽度 3 字体透明度 4字体库
    5 字体大小 6是否加粗 7是否斜体 8下划线 9删除线
    10 左对齐 11 中对齐 12右对齐 13文字方向 14字间距 15行间距
    PS: 字体库和字体大小 可以批量设置  其他属性只能单个设置
    */
    setFontStyle(num,event=null){
      let that = this;
      let allEle = that.canvasObj.getObjects();
      let currentElement = that.canvasObj.getActiveObject();
      let currentElements = that.canvasObj.getActiveObjects();
      switch (num) {
        case 0:
          currentElement.set('stroke',event);
          that.strokeColor = event;
          break;
        case 1:
          currentElement.set('fill',event);
          that.fontColor = event;
          break;
        case 2:
          currentElement.set('strokeWidth',that.strokeWidth)
          break;
        case 3:
          currentElement.set('opacity',that.fontOpacity*0.01);
            break;
        case 4:
          that.fontLoading = true;
          let eleIndex = _.findIndex(allEle,function(o){return o.mid==currentElement.mid}); // 当前操作元素在画布所有元素的索引
          if(_.findIndex(that.alreadyLoadFont,function(o){return o.fontFamilyId==that.fontFamilyId})==-1){
            let params = {
              fun:'getFontLogo',
              id:that.fontFamilyId,
            }
            DoRequest('api',params).then(res=>{
              let style = document.createElement("style");
              style.type = "text/css";
              style.innerText = `@font-face{font-family:'${res.data.data.title}';src:url('http://www.zscm_test.com${res.data.data.url}')format("woff")}`;
              document.getElementsByTagName("head")[0].appendChild(style);
              var font = new FontFaceObserver(res.data.data.title);
              font.load().then(()=>{
                let fontObj = {
                  fontFamilyId:that.fontFamilyId,
                  fontName:res.data.data.title,
                  fontUrl:'http://www.zscm_test.com'+res.data.data.url,
                }
                currentElement.set('fontFamily',res.data.data.title);
                allEle[eleIndex].fontFamilyId=that.fontFamilyId;
                that.canvasObj.requestRenderAll();
                that.alreadyLoadFont.push(fontObj);
                that.fontLoading = false;
              }).catch(err=>{
                console.log(err)
              })
            }).catch(err=>{
              console.log(err);
            })
          }else{
            let fontIndex = _.findIndex(that.alreadyLoadFont,function(o){return o.fontFamilyId==that.fontFamilyId});
            currentElement.set('fontFamily',that.alreadyLoadFont[fontIndex].fontName);
            //allEle[eleIndex].fontFamilyId=that.alreadyLoadFont[fontIndex].fontFamilyId;
            that.canvasObj.requestRenderAll();
            that.fontLoading = false;
          }
          break;
        case 5:
            currentElements.map(function(item,index){
              item.set('fontSize',parseInt(that.fontSize));
              item.set('scaleX',that.fontSize/item.get('fontSize'));
              item.set('scaleY',that.fontSize/item.get('fontSize'));
            })
            break;
        case 6:
          if(that.fontIsBold){
            currentElement.set('fontWeight','normal');
          }else{
            currentElement.set('fontWeight','bold');
          }
          that.fontIsBold = !that.fontIsBold
            break;
        case 7:
          if(that.fontIsItalic){
            currentElement.set('fontStyle','normal');
          }else{
            currentElement.set('fontStyle','italic');
          }
          that.fontIsItalic = !that.fontIsItalic
          break;
        case 8:
            if(that.fontIsUnderline){
              currentElement.set('underline',false);
              that.fontIsUnderline  = false;
            }else{
              currentElement.set('underline',true);
              currentElement.set('linethrough',false);
              that.fontIsUnderline = true;
              that.fontIsDelLine = false;
            }
            break;
        case 9:
          if(that.fontIsDelLine){
              currentElement.set('linethrough',false);
              that.fontIsDelLine  = false;
            }else{
              currentElement.set('linethrough',true);
              currentElement.set('underline',false);
              that.fontIsDelLine = true;
              that.fontIsUnderline = false;
            }
            break;
        case 10:
            currentElement.set('textAlign','left');
            that.textAlign = 'left';
            break;
        case 11:
           currentElement.set('textAlign','center');
            that.textAlign = 'center';
            break;
        case 12:
           currentElement.set('textAlign','right');
            that.textAlign = 'right';
            break;
        case 13:
            // currentElement.enlargeSpaces();
           // that.canvasObj.absolutePan(150,150)
            break;
        case 14:
            currentElement.set('charSpacing',that.letterSpacingValue);
            break;
        case 15:
            currentElement.set('lineHeight',that.lineHeightValue);
            break;
        default:
          break;
      }
      that.canvasObj.renderAll();

    },
    //鼠标右键菜单操作方法
    rightMenuFn(num, e) {
      let that = this;
      that.setElement(num);
    },
    //跟踪鼠标移入移出 描绘素材的边框
    strokeEleBorder(ele) {
      let that = this;
      let angle = ele.target.get("angle");
      let left = ele.target.aCoords.tl.x;
      let top = ele.target.aCoords.tl.y;
      let width = ele.target.get("width") * ele.target.scaleX;
      let height = ele.target.get("height") * ele.target.scaleY;
      let path =
        "M" +
        left +
        " " +
        top +
        "L" +
        (left + width) +
        " " +
        top +
        "L" +
        (left + width) +
        " " +
        (top + height) +
        "L" +
        left +
        " " +
        (top + height) +
        "Z";
      that.hoverObj = new fabric.Path(path, {
        stroke: "#409eff",
        angle: angle,
        centeredRotation: true,
        fill: "rgba(255,255,255,0)",
        fillRule: "nonzero",
        hasControls: false,
        evented: false,
        selectable: false,
        strokeWidth: 1,
      });
      that.canvasObj.add(that.hoverObj).renderAll();
    },
    // 根据素材当前状态 处理操作按钮的状态
    mouseUpInEle(ele) {
      let that = this;
      let mid = ele.mid;
      console.log("当前元素" + mid);
      let allEle = _.filter(that.canvasObj.getObjects(), function (o) {
        return o.mid != undefined;
      });
      let index = _.findIndex(allEle, function (o) {
        return o.mid == mid;
      });
      console.log("当前元素在所有元素数组中的索引" + index);
      if (ele.locked) {
        that.canSetTop = false; //是否可以点击置顶
        that.canSetBottom = false; // 是否可以点击置底
        that.canSetLast = false; // 是否可以点击上移一层
        that.canSetNext = false; // 是否可以点击下移一层
        that.canLocked = true; // 是否可以点击锁定
        that.canCollected = true; // 是否可以点击收藏
        that.canDelete = false; // 是否可以点击删除
        that.canFlipX = false; // 是否可以点击横向翻转
        that.canFlipY = false; // 是否可以点击纵向翻转
        that.canSlide = false; // 是否可以设置透明度
      } else {
        if (index + 1 == allEle.length) {
          // 素材在画布最顶层 不能置顶 不能上移
          that.canSetTop = false; //是否可以点击置顶
          that.canSetBottom = true; // 是否可以点击置底
          that.canSetLast = false; // 是否可以点击上移一层
          that.canSetNext = true; // 是否可以点击下移一层
          that.canLocked = true; // 是否可以点击锁定
          that.canCollected = true; // 是否可以点击收藏
          that.canDelete = true; // 是否可以点击删除
          that.canFlipX = true; // 是否可以点击横向翻转
          that.canFlipY = true; // 是否可以点击纵向翻转
          that.canSlide = true; // 是否可以设置透明度
        } else if (index == 0) {
          // 素材在画布最底层 不能置底 不能下移
          that.canSetTop = true; //是否可以点击置顶
          that.canSetBottom = false; // 是否可以点击置底
          that.canSetLast = true; // 是否可以点击上移一层
          that.canSetNext = false; // 是否可以点击下移一层
          that.canLocked = true; // 是否可以点击锁定
          that.canCollected = true; // 是否可以点击收藏
          that.canDelete = true; // 是否可以点击删除
          that.canFlipX = true; // 是否可以点击横向翻转
          that.canFlipY = true; // 是否可以点击纵向翻转
          that.canSlide = true; // 是否可以设置透明度
        } else {
          that.canSetTop = true; //是否可以点击置顶
          that.canSetBottom = true; // 是否可以点击置底
          that.canSetLast = true; // 是否可以点击上移一层
          that.canSetNext = true; // 是否可以点击下移一层
          that.canLocked = true; // 是否可以点击锁定
          that.canCollected = true; // 是否可以点击收藏
          that.canDelete = true; // 是否可以点击删除
          that.canFlipX = true; // 是否可以点击横向翻转
          that.canFlipY = true; // 是否可以点击纵向翻转
          that.canSlide = true; // 是否可以设置透明度
        }
      }
      that.eleLocked = ele.locked; // 当前选择的对象 是否被锁定
      that.eleCollected = ele.collected; // 当前选择的对象 是否被收藏
    },
    // 将图片渲染至canvas画布
    renderElement: function (item, index) {
      console.log(item);
      var that = this;
      var materialType = item.materialType;
      switch (materialType) {
        case "img":
          // 元素类型为svg
          if (item.thumb_type == 0) {
            let svgObj = fabric.loadSVGFromString(
              item.thumb,
              (objects, options) => {
                var svg = fabric.util.groupSVGElements(objects, options);
                svg.set({
                  crossOrigin: 'anonymous',
                  left: item.x+(1200-that.canvasWidth)/2,
                  top: item.y+(800-that.canvasHeight)/2,
                  scaleX: (item.width ? item.width : 100) / svg.width,
                  scaleY: (item.height ? item.height : 100) / svg.height,
                  transparentCorners: false,
                  id: item.id,
                  mid:item.mid,
                  locked:
                    typeof item.locked === "boolean" ? item.locked : false,
                  collected:
                    typeof item.collected === "boolean"
                      ? item.collected
                      : false,
                  lockMovementX:
                    typeof item.locked === "boolean" ? item.locked : false,
                  lockMovementY:
                    typeof item.locked === "boolean" ? item.locked : false,
                  hasControls:
                    typeof item.locked === "boolean" ? !item.locked : true,
                  flipX: typeof item.flipX === "boolean" ? item.flipX : false,
                  flipY: typeof item.flipY === "boolean" ? item.flipY : false,
                  minScaleLimit: 0.01,
                  materialType:item.materialType,
                  thumb_type:item.thumb_type,
                  opacity:item.opacity?item.opacity:1,
                  haveCollectBtn:item.haveCollectBtn,
                });
                // 规定输出数据的格式
                svg.toObject = (function (toObject) {
                  return function () {
                    return fabric.util.object.extend(toObject.call(this), {
                      id: item.id,
                      locked:
                        typeof item.locked === "boolean" ? item.locked : false,
                      collected:
                        typeof item.collected === "boolean"
                          ? item.collected
                          : false,
                      materialType: materialType,
                      thumb_type: item.thumb_type,
                    });
                  };
                })(svg.toObject);
                // 监听鼠标按下事件
                svg.on("mousedown", function (e) {
                  console.log(e);
                  that.canvasObj.remove(that.hoverObj).renderAll();
                });
                // 监听鼠标进入事件
                svg.on("mouseover", function (e) {
                  if (e.target.locked) {
                    e.target.set("selectable", true);
                  }
                  that.strokeEleBorder(e); // 鼠标移入 绘制素材边框
                });
                // 监听鼠标移出事件
                svg.on("mouseout", function (e) {
                  if (e.target) {
                    if (e.target.locked) {
                      e.target.set("selectable", false);
                    }
                  }
                  that.canvasObj.remove(that.hoverObj).renderAll();
                });
                // 监听鼠标弹起事件
                svg.on("mouseup", function (e) {
                  that.mouseUpInEle(e.target);
                });
                if (index == "max") {
                  that.canvasObj.add(svg).renderAll();
                } else {
                  that.canvasObj.insertAt(svg, index).renderAll();
                }
              }
            );
          } else if (item.thumb_type == 1) {
            // 元素类型为图片
            //var imgUrl = ''
            // let imgObj = fabric.Image.fromURL(item.thumb+'?time='+new Date().getTime(), (img) => {
            let imgObj = fabric.Image.fromURL(item.thumb, (img) => {
              img.set({
                // crossOrigin: 'anonymous',
                left: item.x+(1200-that.canvasWidth)/2,
                top: item.y+(800-that.canvasHeight)/2,
                scaleX: (item.width ? item.width : 100) / img.width,
                scaleY: (item.height ? item.height : 100) / img.height,
                transparentCorners: false,
                id: item.id,
                mid:item.mid,
                locked: typeof item.locked === "boolean" ? item.locked : false,
                collected:
                  typeof item.collected === "boolean" ? item.collected : false,
                lockMovementX:
                  typeof item.locked === "boolean" ? item.locked : false,
                lockMovementY:
                  typeof item.locked === "boolean" ? item.locked : false,
                hasControls:
                  typeof item.locked === "boolean" ? !item.locked : true,
                flipX: typeof item.flipX === "boolean" ? item.flipX : false,
                flipY: typeof item.flipY === "boolean" ? item.flipY : false,
                opacity:item.opacity?item.opacity:1,
                materialType:item.materialType,
                thumb_type:item.thumb_type,
                haveCollectBtn:item.haveCollectBtn,
              });
              // 初始滤镜效果
              img.filters.push(
                // 亮度
                new fabric.Image.filters.Brightness({ 
                  brightness: 0 
                }),
                // 对比度
                new fabric.Image.filters.Contrast({ 
                  contrast: 0 
                }),
                // 饱和度
                new fabric.Image.filters.Saturation({ 
                  saturation: 0
                }),
                // 色调
                new fabric.Image.filters.HueRotation({ 
                  rotation: 0 
                }),
                //模糊
                 new fabric.Image.filters.Blur({
                  blur: 0
                }),
              )
              img.applyFilters()
              //img.scaleToWidth(item.width);
              //img.scaleToHeight(item.height);
              // 规定输出数据的格式
              img.toObject = (function (toObject) {
                return function () {
                  return fabric.util.object.extend(toObject.call(this), {
                    id: item.id,
                    locked:
                      typeof item.locked === "boolean" ? item.locked : false,
                    collected:
                      typeof item.collected === "boolean"
                        ? item.collected
                        : false,
                    materialType: materialType,
                    thumb_type: item.thumb_type,
                  });
                };
              })(img.toObject);
              // 监听鼠标进入
              img.on("mouseover", function (e) {
                if (e.target.locked) {
                  e.target.set("selectable", true);
                }
                that.strokeEleBorder(e);
              });
              // 监听鼠标按下事件
              img.on("mousedown", function (e) {
                that.canvasObj.remove(that.hoverObj).renderAll();
              });
              // 监听鼠标移出
              img.on("mouseout", function (e) {
                if (e.target) {
                  if (e.target.locked) {
                    e.target.set("selectable", false);
                  }
                }
                that.canvasObj.remove(that.hoverObj).renderAll();
              });
              // 监听鼠标弹起事件
              img.on("mouseup", function (e) {
                that.mouseUpInEle(e.target);
              });
              if (index == "max") {
                that.canvasObj.add(img).renderAll();
              } else {
                that.canvasObj.insertAt(img, index).renderAll();
              }
            },{crossOrigin: 'anonymous',});
          }
          break;
        case "text":
          let textObj = new fabric.Textbox(item.textConent, {
            fontFamily:item.fontFamily?item.fontFamily:'宋体',
            fontFamilyId:item.fontFamilyId,
            splitByGrapheme:true, // 自动换行
            dynamicMinWidth:10,
            scaleX:item.scaleX?item.scaleX:1,
            scaleY:item.scaleY?item.scaleY:1,
            left: item.x+(1200-that.canvasWidth)/2,
            top: item.y+(800-that.canvasHeight)/2,
            width: item.width,
            height:item.height,
            // centeredScaling: true,
            transparentCorners: false,
            mid:item.mid,
            locked: item.locked,
            collected: item.collected,
            lockMovementX: item.locked,
            lockMovementY: item.locked,
            hasControls: !item.locked,
            editable:!item.locked,
            flipX: item.flipX,
            flipY: item.flipY,
            opacity:item.opacity?item.opacity:1,
            materialType:item.materialType,
            editingBorderColor:'#d9374b',
            fontWeight:item.fontWeight,
            // shadow:item.shadow,  //阴影
            stroke:item.stroke,
            strokeWidth:item.strokeWidth,
            fill:item.fill,
            charSpacing:item.charSpacing,
            linethrough:item.linethrough,
            underline:item.underline,
            fontStyle:item.fontStyle,
            fontSize:item.fontSize,
            lineHeight:item.lineHeight,
          });
          // 规定输出数据的格式
          textObj.toObject = (function (toObject) {
            return function () {
              return fabric.util.object.extend(toObject.call(this), {
                id: item.id,
                fontFamilyId:item.fontFamilyId,
                locked:
                  typeof item.locked === "boolean" ? item.locked : false,
                collected:
                  typeof item.collected === "boolean"
                    ? item.collected
                    : false,
                materialType: materialType,
                thumb_type: item.thumb_type,
              });
            };
          })(textObj.toObject);
          textObj.setControlsVisibility({
            mt:false,
            mb:false,
          })
           // 监听鼠标按下事件
          textObj.on("mousedown", function (e) {
            that.canvasObj.remove(that.hoverObj).renderAll();
          });
          // 监听鼠标进入事件
          textObj.on("mouseover", function (e) {
            if (e.target.locked) {
              e.target.set("selectable", true);
            }
            that.strokeEleBorder(e); // 鼠标移入 绘制素材边框
          });
          // 监听鼠标移出事件
          textObj.on("mouseout", function (e) {
            if (e.target) {
              if (e.target.locked) {
                e.target.set("selectable", false);
              }
            }
            that.canvasObj.remove(that.hoverObj).renderAll();
          });
          // 监听鼠标弹起事件
          textObj.on("mouseup", function (e) {
            that.mouseUpInEle(e.target);
          });
          if (index == "max") {
            that.canvasObj.add(textObj).renderAll();
          } else {
            that.canvasObj.insertAt(textObj, index).renderAll();
          }
          // 监听缩放事件
          textObj.on("scaling",function(e){
            let fontSize = e.transform.target.get('fontSize');
            that.fontSize = parseInt(e.transform.target.get('scaleY')*fontSize);
          })
          break;
        default:
          break;
      }
    },
    // 监听鼠标右键在画布范围内点击
    rightMouseClick(e) {
      console.log(e);
      let that = this;
      console.log(that.relativeMouseX);
      console.log(that.relativeMouseY);
      if (e.button == 2) {
        var pointer = that.canvasObj.getPointer(e);
        var objects = _.filter(that.canvasObj.getObjects(), function (o) {
          return o.mid != undefined;
        });
        if(objects.length>0){
          for (var i = objects.length - 1; i >= 0; i--) {
            var object = objects[i];
            //判断该对象是否在鼠标点击处
            if (object.containsPoint(pointer)) {
              //选中该对象
              that.canvasObj.setActiveObject(object);
              that.mouseUpInEle(object);
              break;
            } else {
              that.canvasObj.discardActiveObject();
              that.canSetTop = false; //是否可以点击置顶
              that.canSetBottom = false; // 是否可以点击置底
              that.canSetLast = false; // 是否可以点击上移一层
              that.canSetNext = false; // 是否可以点击下移一层
              that.canLocked = false; // 是否可以点击锁定
              that.canCollected = false; // 是否可以点击收藏
              that.canDelete = false; // 是否可以点击删除
              that.canFlipX = false; // 是否可以点击横向翻转
              that.canFlipY = false; // 是否可以点击纵向翻转
              that.canSlide = false; // 是否可以设置透明度
              that.eleLocked = false; // 当前选择的对象 是否被锁定
              that.eleCollected = false; // 当前选择的对象 是否被收藏
            }
          }
        }else{
          that.canvasObj.discardActiveObject();
              that.canSetTop = false; //是否可以点击置顶
              that.canSetBottom = false; // 是否可以点击置底
              that.canSetLast = false; // 是否可以点击上移一层
              that.canSetNext = false; // 是否可以点击下移一层
              that.canLocked = false; // 是否可以点击锁定
              that.canCollected = false; // 是否可以点击收藏
              that.canDelete = false; // 是否可以点击删除
              that.canFlipX = false; // 是否可以点击横向翻转
              that.canFlipY = false; // 是否可以点击纵向翻转
              that.canSlide = false; // 是否可以设置透明度
              that.eleLocked = false; // 当前选择的对象 是否被锁定
              that.eleCollected = false; // 当前选择的对象 是否被收藏
        }
      }
    },
    // 保存下载
    save() {
      var that = this;
      // that.loading = true;
      // console.log(that.canvasObj.toJSON());
       const dataURL =that.canvasObj.toDataURL({
        width: that.canvasWidth,
        height: that.canvasHeight,
        left: 300,
        top: 100,
        format: "png",
      });
        const link = document.createElement("a");
        link.download = "canvas.png";
        link.href = dataURL;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      // console.log(that.canvasObj.toSVG());
      // let moduleStr = JSON.stringify(that.canvasObj);
      // let moduleObj = JSON.parse(moduleStr);
      // let posterObj = {};
      // if(moduleObj.background){
      //   posterObj.background = {
      //     type:'color',
      //     value:moduleObj.background
      //   }
      // }else{
      //   posterObj.background = {
      //     type:'img',
      //     value:moduleObj.backgroundImage.src
      //   }
      // }
      // posterObj.objects = moduleObj.objects;
      // posterObj.overlayImage = moduleObj.overlayImage;
      // // posterObj.svg = that.canvasObj.toSVG();
      // var params = {
      //   fun:'commitCanvas',
      //   data:posterObj,
      //   svg:that.canvasObj.toSVG(),
      // }
      // console.log(params);
      // DoRequest('api',params,false).then(res=>{
      //   that.loading = false;
      //   console.log(res)
      // }).catch(err=>{
      //   console.log(err);
      // })
    },
    //操作元素
    setElement(num) {
      let that = this;
      let canvasAllEle = _.filter(that.canvasObj.getObjects(), function (o) {
        return o.mid != undefined;
      }); // 画布上的所有元素
      let currentElementArr = that.canvasObj.getActiveObjects(); // 画布上当前被选择的元素 数组类型
      let mid, listIndex, canvasIndex;
      if (currentElementArr.length > 0 && currentElementArr.length == 1) {
        mid = currentElementArr[0].mid;
        // listIndex = _.findIndex(that.list, function (o) {
        //   return o.mid == mid;
        // });
        canvasIndex = _.findIndex(canvasAllEle, function (o) {
          return o.mid == mid;
        });
      }
      switch (num) {
        case 0: // 置顶
          currentElementArr[0].bringToFront();
          break;
        case 1: // 置底
          currentElementArr[0].sendToBack();
          break;
        case 2: // 上移一层
          currentElementArr[0].bringForward();
          break;
        case 3: // 下移一层
          currentElementArr[0].sendBackwards();
          break;
        case 4: // 锁定或解锁
          //that.list[listIndex].locked = !that.list[listIndex].locked;
          canvasAllEle[canvasIndex].locked = !canvasAllEle[canvasIndex].locked;
          that.eleLocked = canvasAllEle[canvasIndex].locked;
          currentElementArr[0].set({
            lockMovementX: canvasAllEle[canvasIndex].locked,
            lockMovementY: canvasAllEle[canvasIndex].locked,
            hasControls: !canvasAllEle[canvasIndex].locked,
            selectable: !canvasAllEle[canvasIndex].locked,
            editable:!canvasAllEle[canvasIndex].locked
          });
          that.canSetTop = !canvasAllEle[canvasIndex].locked;
          that.canSetBottom = !canvasAllEle[canvasIndex].locked;
          that.canSetLast = !canvasAllEle[canvasIndex].locked;
          that.canSetNext = !canvasAllEle[canvasIndex].locked;
          that.canDelete = !canvasAllEle[canvasIndex].locked;
          that.canSlide = !canvasAllEle[canvasIndex].locked;
          that.canCopy = !canvasAllEle[canvasIndex].locked;
          break;
        case 5: // 收藏或取消收藏
          let isCollected = currentElementArr[0].collected;
          let type = that.showSecondTypeList?'mtlColumn':'mtlList';
          let gIndex,pIndex,sIndex;
          if(type=='mtlColumn'){
            that.materialKindList.map(function(item,index){
              if(item.list){
                item.list.map(function(it,idx){
                  if(it.list){
                    it.list.map(function(i,x){
                    if(i.id==id){
                      gIndex=index;
                      pIndex = idx;
                      sIndex = x;
                    }
                })
                  }
                })
              }
            })
          }else{
            gIndex = null;
            that.materialList.map(function(item,index){
              item.map(function(it,idx){
                if(it.id==id){
                  pIndex = index;
                  sIndex = idx;
                }
              })
            })
          }
          if (isCollected) {
            that.unCollectThis(type,id,gIndex,pIndex,sIndex);
          } else {
            that.collectThis(type,id,gIndex,pIndex,sIndex);
          }
          canvasAllEle[canvasIndex].collected = !canvasAllEle[canvasIndex]
            .collected;
          that.eleCollected = !that.eleCollected;
          break;
        case 6: // 删除
          currentElementArr.map((item, index) => {
            that.canvasObj.remove(item);
            //that.canvasObj.discardActiveObject(item)
            let i = that.needUpVipLevel.indexOf(item.id);
            that.needUpVipLevel.splice(i,1);
          });
          that.canvasObj.discardActiveObject();
          // 因为是删除操作 所以在删除后将当前目标元素置为空
          that.currentTarget = '';  
          break;
        case 7: // 横向翻转
          let statusX = canvasAllEle[canvasIndex].flipX;
          currentElementArr[0].set("flipX", !statusX);
          break;
        case 8: // 纵向翻转
          let statusY = canvasAllEle[canvasIndex].flipY;
          currentElementArr[0].set("flipY", !statusY);
          break;
        case 9: // 复制
          currentElementArr[0].clone(function(opt){
            console.log(opt);
            let ele;
            if(opt.materialType=='img'){
                ele = {
                  id: opt.id,
                  mid:'diy'+that.myId,
                  width: opt.width*opt.scaleX,
                  height: opt.height*opt.scaleY,
                  thumb: opt.src,
                  x:10,
                  y:10,
                  angle: opt.angle,
                  opacity: opt.opacity,
                  flipX: opt.flipX,
                  flipY: opt.flipY,
                  materialType: "img", // 大类 类型
                  thumb_type: opt.thumb_type, // 0 svg 1 图片
                  locked: false,
                  collected: false,
                  haveCollectBtn:false,
                }
            }else{
                ele = {
                  mid: 'diy'+that.myId,
                  width: opt.width,
                  height: opt.height,
                  name: "文本1",
                  textConent:opt.text,
                  x:10,
                  y:10,
                  angle: opt.angle,
                  opacity: opt.opacity,
                  flipX:opt.flipX,
                  flipY:opt.flipY,
                  materialType: "text",
                  thumb_type: "text",
                  locked: false,
                  collected: false,
                  fontWeight:opt.fontWeight,
                  // shadow:null,
                  stroke:opt.stroke,
                  strokeWidth:opt.strokeWidth,
                  fill:opt.fill,
                  charSpacing:opt.charSpacing,
                  linethrough:opt.linethrough,
                  underline:opt.underline,
                  overline:opt.overline,
                  fontStyle:opt.fontStyle,
                  fontSize:opt.fontSize,
                  fontFamily:opt.fontFamily,
                  fontFamilyId:opt.fontFamilyId,
                  lineHeight:opt.lineHeight,
                }
            }
            that.list.push(ele);
            that.renderElement(ele,'max');
            that.myId++;
          })
          break;  
        default:
          break;
      }
      that.mouseUpInEle(currentElementArr[0]);
      // 当鼠标右键操作时 操作之后将右键菜单可见置为false
      that.contextMenuVisible = false;
      that.canvasObj.renderAll();
    },
    // 设置元素透明度
    setEleOpacity() {
      let that = this;
      let currentElement = that.canvasObj.getActiveObject();
      if (currentElement) {
        currentElement.set("opacity", that.opacityValue * 0.01);
      }
      that.canvasObj.renderAll();
    },
    // 缩小画布
    reduce(){
      let that = this;
      if(that.zoomPercentage<=50){
        return false;
      }else{
        that.zoomPercentage-=10;
        that.canvasObj.zoomToPoint({x:600,y:400}, that.zoomPercentage/100);
      }
    },
    // 放大画布
     large(){
      let that = this;
      if(that.zoomPercentage>=300){
        return false;
      }else{
        that.zoomPercentage+=10;
        that.canvasObj.zoomToPoint({x:600,y:400}, that.zoomPercentage/100);
      }
    },
    // 设置亮度
    setDiyFilter(index,value){
      let that =this;
      let ele = that.canvasObj.getActiveObject();
      if(ele){
        switch (index) {
          case 0:
            ele.filters[index][value] = that.brightness/100;
            break;
          case 1:
            ele.filters[index][value] = that.contrast/100;
                break;
          case 2:
            ele.filters[index][value] = that.saturation/100;
                break;
          case 3:
            ele.filters[index][value] = that.hue/100;
              break;
          case 4:
            ele.filters[index][value] = that.blur/100;
            break;
          default:
            break;
        }
        ele.applyFilters();
      }
      that.canvasObj.renderAll();
    },
     // 设置系统预置滤镜效果
    setFilter(index){
      let that = this;
      const ele = that.canvasObj.getActiveObject();
      if(ele){
        ele.filters[0]['brightness'] = that.systemFilterList[index]['brightness']/100;
        ele.filters[1]['contrast'] = that.systemFilterList[index]['contrast']/100;
        ele.filters[2]['saturation'] = that.systemFilterList[index]['saturation']/100;
        ele.filters[3]['rotation'] = that.systemFilterList[index]['hue']/100;
        ele.filters[4]['blur'] = that.systemFilterList[index]['blur']/100;
        that.brightness =  that.systemFilterList[index]['brightness']
        that.contrast =  that.systemFilterList[index]['contrast']
        that.saturation =  that.systemFilterList[index]['saturation']
        that.hue =  that.systemFilterList[index]['hue']
        that.blur =  that.systemFilterList[index]['blur']
        ele.applyFilters();
      }
      that.canvasObj.renderAll();
      console.log(ele);
    },
    // 显示更改尺寸弹窗
    showPopFn(){
      let  that = this;
      that.showPop = true;
    },
    // 关闭更改尺寸的弹窗
    closeSizePop(){
      this.currentActiveSizeIndex = null;
    },
    // 选择要修改的尺寸
    chooseChangeSize(index){
      let that = this;
      that.currentActiveSizeIndex = index;
    },
    // 确认修改尺寸
    confirmResize(){
      let that  = this;
      const index = that.currentActiveSizeIndex;
      if(index==null){
        that.$message.warning('请选择要调整的尺寸');
      }else{
        const width = that.sizeList[index]['width'];
        const height = that.sizeList[index]['height'];
        // that.canvasWidth = width;
        // that.canvasHeight = height;
        // that.canvasObj = new fabric.Canvas("canvas", {
        //   selection:that.selection,
        //   allowTouchScrolling: false, // 拖动画布是否可以滚动浏览器
        //   preserveObjectStacking: true, // 禁止选中图层时自定置于顶部
        //   backgroundColor: "#fff",
        //   devicePixelRatio:true, //Retina 高清屏 屏幕支持
        //   controlsAboveOverlay: true, //是否在重叠图像上方渲染对象控件（边界/控件)
        //   clipPath: new fabric.Rect({
        //     left: (1200-that.canvasWidth)/2,
        //     top:(800-that.canvasHeight)/2,
        //     width:that.canvasWidth,
        //     height: that.canvasHeight,
        //   }),
        // });
        // that.canvasObj.renderAll();
        that.showPop = false;
      }
    },
    // 监听键盘删除事件
    deleteSelectedElement(e){
      console.log(e);
      var that = this;
      if(e.keyCode==8||e.keyCode==46){
        var allSelectedEle = that.canvasObj.getActiveObjects();
        allSelectedEle.map((item, index) => {
          if(item.materialType=='img'){
            that.canvasObj.remove(item);
            that.canvasObj.discardActiveObject();
            // 因为是删除操作 所以在删除后将当前目标元素置为空
            that.currentTarget = '';  
            let i = that.needUpVipLevel.indexOf(item.id);
            that.needUpVipLevel.splice(i,1);
          }else{
            if(!item.isEditing){
              that.canvasObj.remove(item);
              that.canvasObj.discardActiveObject();
              // 因为是删除操作 所以在删除后将当前目标元素置为空
              that.currentTarget = '';  
              let i = that.needUpVipLevel.indexOf(item.id);
              that.needUpVipLevel.splice(i,1);
            }
          }
        });

      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var that = this;
    window.addEventListener('keyup',that.deleteSelectedElement) // 监听键盘删除事件
    // that.getFontFamilyList(); // 预先加载字体库列表
    that.canvasObj = new fabric.Canvas("canvas", {
      selection:that.selection,
      allowTouchScrolling: false, // 拖动画布是否可以滚动浏览器
      preserveObjectStacking: true, // 禁止选中图层时自定置于顶部
      backgroundColor: "#fff",
      devicePixelRatio:true, //Retina 高清屏 屏幕支持
      controlsAboveOverlay: true, //是否在重叠图像上方渲染对象控件（边界/控件)
      clipPath: new fabric.Rect({
        left: (1200-that.canvasWidth)/2,
        top:(800-that.canvasHeight)/2,
        width:that.canvasWidth,
        height: that.canvasHeight,
      }),
    });
    that.canvasObj.renderAll();
    //添加参考线
    initAligningGuidelines(that.canvasObj);
    // 回显模板数据
    for (let i = 0; i < that.list.length; i++) {
      that.renderElement(that.list[i], i);
    }
    //添加水印
    that.canvasObj.setOverlayImage('http://www.zscm_test.com/upload/sys/image/41/d214cb4e4d9045d2e384288efc7c07.png', function(){
      that.canvasObj.renderAll();
    },{
      width:that.canvasWidth,
      height: that.canvasHeight,
      originX: 'left',
      originY: 'top',
      left: (1200-that.canvasWidth)/2,
      top:(800-that.canvasHeight)/2,
      crossOrigin:'anonymous'
    });
    // 监听鼠标滚轮滚动
    that.canvasObj.on('mouse:wheel', function(o) {
      console.log(that.zoom);
      if(o.e.deltaY>0){
        that.zoom = that.canvasObj.getZoom().toFixed(1)*1 -0.1
      }else{
        that.zoom = that.canvasObj.getZoom().toFixed(1)*1 +0.1;
      }
      if(that.zoom>3 ||that.zoom<0.5){
        return false;
      }else{
        that.zoomPercentage =(that.zoom * 100).toFixed(0)*1;
        that.zoomPoint = new fabric.Point(o.pointer.x, o.pointer.y)
        that.canvasObj.zoomToPoint(that.zoomPoint, that.zoom)
        that.resetOriginAfterZoom()
      }
    })
    //监听鼠标按下
    that.canvasObj.on('mouse:down', function(opt) {
      that.showTips = true;
      that.mouseFrom.x = that.getX(opt)
      that.mouseFrom.y = that.getY(opt)
      var evt = opt.e;
      if (evt.altKey === true) {
        that.isDragging = true;
        that.selection = false;
        that.lastPosX = evt.clientX;
        that.lastPosY = evt.clientY;
      }
    });
    // 监听鼠标移动
    that.canvasObj.on('mouse:move', function(opt) {
      if (that.isDragging) {
        var e = opt.e;
        let delta = new fabric.Point(e.movementX, e.movementY);
        that.canvasObj.relativePan(delta);
        that.relativeMouseX += e.movementX //累计每一次移动时候的偏差
        that.relativeMouseY += e.movementY
        // var vpt = that.canvasObj.viewportTransform;
        // vpt[4] += e.clientX - that.lastPosX;
        // vpt[5] += e.clientY - that.lastPosY;
        // that.canvasObj.requestRenderAll();
        // that.lastPosX = e.clientX;
        // that.lastPosY = e.clientY;
      }
      that.mouseTo.x = that.getX(opt)
      that.mouseTo.y = that.getY(opt)
    });
    that.contextMenuTarget = document.getElementById("center");
    // 在画布上监听鼠标弹起事件
    that.canvasObj.on("mouse:up", function (options) {
        that.showTips = false;
        that.mouseTo.x = that.getX(options)
        that.mouseTo.y = that.getY(options)
        that.canvasObj.setViewportTransform(that.canvasObj.viewportTransform);
        that.isDragging = false;
        that.selection = true;
      // 监听当前画布上是否有元素被选择 没有则将按钮状态置为不可操作
      let activeEleArr = that.canvasObj.getActiveObjects();
      console.log(activeEleArr);
      if (activeEleArr.length <= 0) {
        // 当前没有元素被选择 不能进行任何操作
        that.currentTarget = '';
        that.canSetTop = false;
        that.canSetBottom = false;
        that.canSetLast = false;
        that.canSetNext = false;
        that.canLocked = false;
        that.canCollected = false;
        that.canDelete = false;
        that.canFlipX = false;
        that.canFlipY = false;
        that.canCopy = false;
        that.canSlide = false;
        that.eleCollected = false;
        that.eleLocked = false;
        that.haveCollectBtn = false;
      } else if (activeEleArr.length > 0 && activeEleArr.length == 1) {
        // 当前被操作的元素为1个 可以进行任意操作
        if(activeEleArr[0].materialType=='text'){
          that.currentTarget = 'text'
        }else{
          that.imgControlTab = 'image';
          if(activeEleArr[0].thumb_type==0){
            that.currentTarget = 'svg'
          }else{
            that.currentTarget = 'img'
            that.showFilterTab = true;
          }
        }
        that.haveCollectBtn = activeEleArr[0].haveCollectBtn; // 当前元素是否可以被收藏
        if (activeEleArr[0].locked) {
          that.canSetTop = false;
          that.canSetBottom = false;
          that.canSetLast = false;
          that.canSetNext = false;
          that.canDelete = false;
          that.canFlipX = false;
          that.canFlipY = false;
          that.canSlide = false;
          that.canCopy = false;
        } else {
          that.canSetTop = true;
          that.canSetBottom = true;
          that.canSetLast = true;
          that.canSetNext = true;
          that.canDelete = true;
          that.canFlipX = true;
          that.canFlipY = true;
          that.canSlide = true;
          that.canCopy = true;
        }
        // 当前选择了1个元素 并且被选中的元素是图像(图片或svg)
        if(activeEleArr[0].materialType=='img'){  
          that.canSetTextStyle = false; // 隐藏文本相关操作 
          if(activeEleArr[0].thumb_type!=0){
            that.showFilterTab = true;  
          // 当前选中的元素为单个图片 打开滤镜操作面板 回显滤镜效果
            if(activeEleArr[0].filters.length>0){
              that.brightness = activeEleArr[0].filters[0].brightness*100
              that.contrast = activeEleArr[0].filters[1].contrast*100
              that.saturation = activeEleArr[0].filters[2].saturation*100
              that.hue = activeEleArr[0].filters[3].rotation*100
              that.blur = activeEleArr[0].filters[4].blur*100
            }
          }
        }else{
          // activeEleArr[0].set('lockUniScaling',false);
          that.canSetTextStyle = true; // 选择单个文字元素 可以设置任何样式
          that.fontSize = parseInt(activeEleArr[0].fontSize*activeEleArr[0].scaleY); // 当前字体大小
          that.fontFamily = activeEleArr[0].fontFamily;// 当前字体库名字
          that.fontFamilyId = activeEleArr[0].fontFamilyId;// 当前字体库id
          that.fontColor = activeEleArr[0].fill;  // 当前字体颜色
          if(activeEleArr[0].fontWeight=='bold'){
            that.fontIsBold = true
          }else{
            that.fontIsBold = false
          }
          if(activeEleArr[0].fontStyle=='italic'){
            that.fontIsItalic = true
          }else{
            that.fontIsItalic = false
          }
          if(activeEleArr[0].underline){
            that.fontIsUnderline = true
          }else{
            that.fontIsUnderline = false
          }
          if(activeEleArr[0].linethrough){
            that.fontIsDelLine = true;
          }else{
            that.fontIsDelLine = false;
          }
          if(activeEleArr[0].stroke==null||activeEleArr[0].stroke==''){
            that.fontHaveBorder = false
          }else{
            that.fontHaveBorder = true;
            that.strokeColor = activeEleArr[0].stroke
            that.strokeWidth = activeEleArr[0].strokeWidth
          }
          that.textAlign = activeEleArr[0].textAlign;
          that.letterSpacingValue = activeEleArr[0].charSpacing;
          that.lineHeightValue = activeEleArr[0].lineHeight
        }
        that.canLocked = true;
        that.canCollected = true;
        that.eleLocked = activeEleArr[0].locked;
        that.eleCollected = activeEleArr[0].collected;
        that.opacityValue = activeEleArr[0].opacity * 100;
      } else {
        var flagAllImg = false; // 所有选中的素材中 是否含有图像素材
        for(var i =0;i<activeEleArr.length;i++){
          if(activeEleArr[i].materialType=='img'){
            flagAllImg = true;
            break;
          }else{
            flagAllImg = false;
          }
        }
        // 判断选择的所有素材中有 图像素材 则显示图像操作的tab 反之则显示文本操作tab
        if(flagAllImg){
          that.currentTarget = 'img'; 
          that.imgControlTab = 'image';
        }else{
          that.currentTarget = 'text';
        }
        that.showFilterTab = false;// 当前被操作元素大于1个 不能设置滤镜
        // 当前被操作的元素大于1个 只能进行 删除
        that.canSetTop = false;
        that.canSetBottom = false;
        that.canSetLast = false;
        that.canSetNext = false;
        that.canLocked = false;
        that.canCollected = false;
        that.canDelete = true;
        that.eleCollected = false;
        that.eleLocked = false;
        that.canFlipX = false;
        that.canFlipY = false;
        that.canSlide = false;
        that.haveCollectBtn = false;
        that.canCopy = false;
        that.canSetTextStyle = false; // 选中的元素大于1个时 不能设置除字体大小 字体库以外的样式
      }
    });
    // 监听画布上元素旋转
    that.canvasObj.on("object:rotating", function (e) {
      console.log(e);
      that.rotating = true;
      that.angle = parseInt(that.canvasObj.getActiveObject().get("angle")); // 获取当前元素的选择角度
      let tlX = e.target.oCoords.tl.x; // 左上角X坐标
      let tlY = e.target.oCoords.tl.y; // 左上角Y坐标
      let trX = e.target.oCoords.tr.x;
      let trY = e.target.oCoords.tr.y;
      let blX = e.target.oCoords.bl.x;
      let blY = e.target.oCoords.bl.y;
      let brX = e.target.oCoords.br.x;
      let brY = e.target.oCoords.br.y;
      let mtrX = e.target.oCoords.mtr.x; // 旋转按钮X坐标
      let mtrY = e.target.oCoords.mtr.y; // 旋转按钮Y坐标
      let circleX = (trX - blX) / 2 + blX - 15; // 元素旋转时圆心X 坐标
      let circleY = (-trY - blY) / -2 - 15; // 元素旋转时圆心Y坐标
      /*
      圆点坐标：(x0,y0) 
      半径：r 
      角度：a0 
      则圆上任一点为：（x1,y1） 
      x1   =   x0   +   r   *   cos(ao   *   3.14   /180   ) 
      y1   =   y0   +   r   *   sin(ao   *   3.14   /180   ) 
      */
      // 计算图像框对角线交点的坐标
      let intersectionX = (trX + blX) / 2;
      let intersectionY = (trY + blY) / 2;
      // 计算元素旋转时圆半径 半径为图像框对角线交点坐标 到旋转按钮点坐标的距离 + 50
      let circleR =
        Math.abs(
          Math.sqrt(
            Math.pow(intersectionX - mtrX, 2) +
              Math.pow(intersectionY - mtrY, 2)
          )
        ) + 50;
      that.angleX =
        circleX + circleR * Math.cos(((that.angle - 90) * Math.PI) / 180); //元素旋转角度显示容器的X坐标
      that.angleY =
        circleY + circleR * Math.sin(((that.angle - 90) * Math.PI) / 180); // 元素旋转角度显示容器Y坐标
    });
    // 监听元素停止旋转
    that.canvasObj.on("object:rotated", function (e) {
      that.rotating = false;
    });
    // 监听元素移动  显示当前坐标点
    that.canvasObj.on("object:moving",function(e){
      that.moving = true;
      // 计算当前元素的X坐标  即元素本身的坐标 减去clipPath的left
      // Y坐标同理 减去top
      that.eleX = parseInt(e.target.left-((1200-that.canvasWidth)/2));
      that.eleY = parseInt(e.target.top-((800-that.canvasHeight)/2));
      that.moveBoxLeft = e.target.oCoords.tl.x-70;
      that.moveBoxTop = e.target.oCoords.tl.y;
    })
    // 监听元素停止移动 关闭坐标点显示
    that.canvasObj.on("object:moved",function(e){
      that.moving = false;
    })
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
//@import url(); 引入公共css类
.head {
  width: 100%;
  padding: 1rem 2.5%;
  box-sizing: border-box;
  height: 5rem;
  line-height: 3rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f6f6f6;
}
.head > ul {
  display: flex;
}
.head > ul:first-child {
  width: 25%;
  justify-content: space-between;
  color: #3a3a3a;
  align-items: center;
  cursor: pointer;
}
.head > ul:last-child {
  width: 25%;
  justify-content: space-between;
  color: #3a3a3a;
  align-items: center;
  cursor: pointer;
}
.container {
  width: 100%;
  height: calc(100vh - 80px);
  background-color: #f6f6f6;
}
#left {
  background-color: #fff;
  height: calc(100vh - 80px);
  width: 400px;
  min-width: 400px;
  float: left;
}
.leftTab{height: 100%;position: relative;}
.leftTab::after{content: "";width: 2px;height: 100%;position:absolute;background-color: #f6f6f6;top: 0;left:66px;}
.leftTab .el-tabs__item {
  padding: 0 10px;
  height: 80px;
  border: none;
  outline: none;
}
.leftTab .el-tabs__item.is-active{
  color: #d9374b;
}
.leftTab .el-tabs__active-bar{
  background-color: #d9374b;
}
.leftTab .el-tabs__item:hover{
  color: #d9374b;
}
.leftTab .el-tabs__item:hover .icon01{
    background-image: url('../assets/image/icon1-1.png');
}
.leftTab .el-tabs__item:hover .icon02{
    background-image: url('../assets/image/icon2-1.png');
}
.leftTab .el-tabs__item:hover .icon03{
    background-image: url('../assets/image/icon3-1.png');
}
.leftTab .el-tabs__item:hover .icon04{
    background-image: url('../assets/image/icon4-1.png');
}
.leftTab .el-tabs__item:hover .icon05{
    background-image: url('../assets/image/icon5-1.png');
}
.leftTab .el-tab-pane{
  height: calc(100vh - 80px);
  // overflow-y:scroll;
  // overflow-x:hidden;
}
.slotBtn {
  text-align: center;
  width: 3rem;
  height: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.slotBtn i {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  font-weight: bold;
  transform: translateX(-50%);
}
.icon1{
  background-image: url('../assets/image/icon1.png');
}
.icon1-1{
  background-image: url('../assets/image/icon1-1.png');
}
.icon2{
  background-image: url('../assets/image/icon2.png');
}
.icon2-1{
  background-image: url('../assets/image/icon2-1.png');
}
.icon3{
  background-image: url('../assets/image/icon3.png');
}
.icon3-1{
  background-image: url('../assets/image/icon3-1.png');
}
.icon4{
  background-image: url('../assets/image/icon4.png');
}
.icon4-1{
  background-image: url('../assets/image/icon4-1.png');
}
.icon5{
  background-image: url('../assets/image/icon5.png');
}
.icon5-1{
  background-image: url('../assets/image/icon5-1.png');
}
.slotBtn span {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
}
.leftListBox{padding: 1rem;height: 100%;box-sizing: border-box;}
.tplBox{height:calc(100vh - 180px)}
.tplTab{width: 100%;height: 2rem;
margin-top: 2rem;
display: flex;
  border-bottom: 2px solid #f6f6f6;
}
.tplTab li{
  width: 50%;
  text-align: center;
  line-height: 2rem;
  font-size:0.85rem;
  letter-spacing: 2px;
  cursor: pointer;
}
.tplTabActive{
  color: #d9374b;
  position: relative;
}
.tplTabActive::after{
  content:"";
  position: absolute;
  width: 50%;
  height: 2px;
  bottom: -2px;
  left:25%;
  background-color: #d9374b;
}
.tplList{
  padding: 1rem 8px 1rem 0;
}
.tplList li{
  width: 100%;
  height: 10rem;
  line-height: 10rem;
  margin-bottom: 1rem;
  border: 1px solid red;
  text-align: center;
}
.tplList li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
//text
.leftTextBox{
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
  overflow-y:scroll;
  overflow-x: hidden;
}
.addTextBtn{
  width: 100%;
  margin-bottom: 1rem;
  line-height: 2.5rem;
  text-align: center;
  color: #d9374b;
  background-color: #ffedf6;
  border-radius: 5px;
  letter-spacing: 2px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}
.leftTextList>ul{
  display: flex;
  flex-wrap: wrap;
}
.leftTextList>ul>li{
  width: 45%;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
  margin: 0 10% 1rem 0;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  cursor: pointer;
}
.leftTextList>ul>li:nth-child(2n){
  margin: 0 0 1rem 0;
}
.leftTextList li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
// material
.leftMaterialBox{
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
  // overflow-y:scroll;
  // overflow-x: hidden;
}
.mtlListBox{
  margin-top: 1rem;
  height: calc(100vh - 180px);
  position: relative;
}
.mtlFirstType{
  margin-bottom: 1rem;
}
.mtlFirstType>ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mtlFirstType>ul>li{
  width: 22%;
  height: 60px;
  text-align: center;
  margin-right: 4%;
  margin-bottom: 10px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
}
.mtlFirstType>ul>li:nth-child(4n){
  margin-right: 0;
}
.mtlFirstType > ul > li span{
  display: block;
  width: 100%;
  height: 100%;
  justify-content: center;
 display: flex;
 align-items: center;
 font-size: 0.8rem;
}
.mtlFirstActive{
  background-color: #d9374b !important;
  color: #fff !important;
}
.secondTypeList{
  margin-bottom: 1rem;
}
.secondTypeList>ul{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.secondMtlTitle{
  font-weight: bold;
}
.secondMtlMore{
  color: #999999;
  cursor: pointer;
}
.mtlThirdList{
  display: flex;
  flex-wrap: wrap;
  padding: 0 2px 1rem;
}
.mtlThirdList>li:nth-child(3n){
  margin-right: 0;
}
.mtlList{
  width: 100%;
  padding: 0 10px 0 0;
  position: absolute;
  left: 0;
  // top: 76px;
  box-sizing: border-box;
  transform: translateX(150%);
  transition: all 0.75s;
  opacity: 0;
  overflow: auto;
}
.mtlListAll{
  width: 100%;
  position: absolute;
  left: 0;
  // top: 76px;
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.75s;
}
.showMtl{
  transform: translateX(0) !important;
  opacity: 1 !important;
}
.mtlCurrentTypeTitle{
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.materialList {
  padding: 0 10px 0 0;
}
.materialList > ul::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
.materialItem {
  width: 31%;
  height: 100px;
  float: left;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 10px 1%;
  cursor: pointer;
  position: relative;
  background-color: #f9f9f9;
}
.materialItem::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.5s;
  border-radius: 5px;
}
.materialItem:hover::after {
  opacity: 1;
}
.materialItem:hover .likeThis {
  opacity: 1;
}
.materialItem img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  margin: auto;
}
.likeThis {
  position: absolute;
  left: 10%;
  bottom: 10%;
  width: 20px;
  height: 20px;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: all 0.5s;
}
.likeThis i {
  color: #fff;
  text-align: center;
  line-height: 20px;
}
.noMore{
  font-size: 0.75rem;
  width: 100%;
  text-align: center;
  color: #999999;
}
//background
.leftBgBox{
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
}
.bgTop{
  margin-bottom: 1rem;
}
.bgTop>ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.bgTop>ul>li{
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
.bgType{
  padding: 1rem 0;
  border-top: 1px solid #eeeeee;
}
.bgType>ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.bgType>ul>li{
  width: 30%;
  text-align: center;
  font-size: 0.8rem;
  border: 1px solid #eeeeee;
  padding: 0.75rem 0;
  margin-right: 5%;
  margin-bottom: 1rem;
  box-sizing: border-box;
  cursor: pointer;
}
.bgType>ul>li:nth-child(3n){
  margin-right: 0;
}
.bgListBox{
  width: 100%;
  // height: 75%;
  box-sizing: border-box;
}
.bgList,.uploadList{
  display: flex;
  flex-wrap: wrap;
  padding-right: 10px;
}
.bgList>li,.uploadList>li{
  width: 30%;
  height: 150px;
  margin-right: 5%;
  margin-bottom: 1rem;
  cursor: pointer;
}
.bgList>li>img,.uploadList>li>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bgList>li:nth-child(3n),.uploadList>li:nth-child(3n){
  margin-right: 0;
}
.infinite-list-wrapper::-webkit-scrollbar{
  width: 6px;
}
.infinite-list-wrapper::-webkit-scrollbar-thumb{
border-radius: 5px;
background-color: #E8E8E8;
}
.infinite-list-wrapper::-webkit-scrollbar-button{
display: none;
}
.infinite-list-wrapper::-webkit-scrollbar-corner{
  background:khaki;
}
// upload
.leftUploadBox{
  padding: 1rem;
  height: 100%;
  box-sizing: border-box;
}
.topUploadBtn .upload-demo button{
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #d9374b !important;
  line-height: 28px;
  border: 1px solid #d9374b !important;
  font-size: 0.8rem;
}
.topUploadBtn .upload-demo button:hover{
  background-color: #d9374b !important;
  border: 1px solid #d9374b !important;
}
.topUploadBtn .el-upload{
  display: block;
}
.phoneUpload{
  width: 100%;
  text-align: center;
  color: #000;
  background-color: #f6f6f6;
  line-height: 28px;
  border: 1px solid #f6f6f6;
  padding: 9px 15px;
  box-sizing: border-box;
  margin-top: 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.uploadTips{
  font-size: 0.75rem;
  line-height: 1.5rem;
  margin: 1rem 0;
  letter-spacing: 1px;
}
.uploadManage{
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 1rem;
}
.uploadManage>ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.uploadManage li:last-child{
  color: #d9374b;
  cursor: pointer;
}
.uploadManage li:last-child button{
  margin-left: 10px;
  font-size: 0.75rem;
  color: #d9374b;
  padding: 0.4rem 0.5rem;
  color: #fff;
  border: none;
  background-color: #d9374b;
  cursor: inherit;
}
.notAllowed{
  background-color: #ccc !important;
  cursor: not-allowed !important;
}
.uploadTips span{
  color: #d9374b;
}
.uploadList>li{
  position: relative;
}
.uploadList>li .el-checkbox-group{
  position: absolute;
  top: 5%;
  left: 5%;
}

.uploadList .el-checkbox__input.is-checked+.el-checkbox__label{
  color: #d9374b;
}
.uploadList .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  border-color: #d9374b;
  background-color: #d9374b;
}
// 鼠标右键菜单
.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  display: block;
  font-family: Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: fixed;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  z-index: 999;
  display: none;
  a {
    padding: 2px 15px;

    // width: 120px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: block;
    color: #1a1a1a;
  }
  user agent stylesheet a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
  }
  a:hover {
    background: #42b983;
    // background: $color-primary;
    color: #fff;
  }
}
.rightMenuBtn {
  width: 100px;
  text-align: center;
  display: block;
  padding: 10px;
  border: none;
  outline: none;
  border-bottom: 1px solid #eee;
  background: #fff;
  font-size: 14px;
}
.rightMenuBtn:not([disabled="disabled"]) {
  cursor: pointer;
}
.rightMenuBtn:not([disabled="disabled"]):hover {
  color: #42b983;
  background: #f5f5f5;
}
.rightMenuBtn[disabled="disabled"] {
  color: #ccc;
}
#center{
  width: calc(100% - 700px) !important;
  height: calc(100vh - 80px) !important;
  float: left;
  overflow: hidden;
}
.canvasBox {
  position: relative;
}
.angleBox {
  width: 30px;
  height: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
.moveBox{
  width: 60px;
  height: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
// controlArea
.showRight{
  min-width: 300px;
  width: 300px !important;
  opacity: 1 !important;
}
#right{
  width: 100%;
  float: right;
  width: 0px;
  height: calc(100vh - 80px);
  background-color: #fff;
  position: relative;
  opacity: 0;
  transition: all 0.5s;
  overflow: hidden;
}
#right>div{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  transform: translateX(150%);
  transition: all 0.5s;
}
.imgOrFilter{
  width: 100%;
  height: 3rem;
  border-bottom:2px solid #f6f6f6;
}
.imgOrFilter ul{
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgOrFilter ul li{
  width: 40%;
  text-align: center;
  line-height: 3rem;
  cursor: pointer;
}
.imgCtrlActive{
  color: #d9374b;
  position: relative;
}
.imgCtrlActive::after{
  content: "";
  position: absolute;
  width: 30%;
  height: 2px;
  left: 50%;
  bottom: -2px;
  background-color: #d9374b;
  transform: translateX(-50%);
}
.imgControlTabPane{
  width: 100%;
  height: calc(100vh - 130px);
  position: relative;
  overflow: hidden;
}
.imgControlTabPane>div{
  position: absolute;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%) ;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transition: all 0.5s;
  -ms-transition:all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  opacity: 0;
}
.imgCtrlTabActive{
  transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  opacity: 1 !important;
}
.imgControlBtn{
  width: 80%;
  margin: 2rem auto;
}
.imgControlBtn>li>button{
  width: 100%;
  line-height: 1.5rem;
}
.opacitySlide{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #DCDFE6;
  border-radius:4px;
}
.opacitySlide>div{
  width: 50%;
}
.opacitySlide .el-slider__bar{background-color: #d9374b;}
.opacitySlide .el-slider__button{background-color: #d9374b;border-color:#d9374b;}
.opacitySlide .el-slider__bar,.opacitySlide .el-slider__runway{height: 2px;}
.opacitySlide .el-slider__button-wrapper{width: 20px;height:20px;top: -10px;}
.opacitySlide .el-slider__button{width: 8px;height: 8px;}
.imgControlBtn2{display: flex;margin-top: 12rem;}
.imgControlBtn2>li{font-size:0.85rem;
letter-spacing: 2px;
width: 25%;text-align: center;border: 1px solid #eeeeee;padding: 0.5rem 0;box-sizing: border-box;}
.imgControlBtn2 button{padding: 0;border: none;color: #000;}
.sortBtn{position: relative;cursor: pointer;}
.sortBtn::after{content:'';position:absolute;
    width: 100px;
    height: 120px;
    padding: 10px 0;
    bottom: 0;
    left: -50%;
    border: 1px solid #ccc;
    transform: translate(15%, -30%);
    z-index: -2;
    display: none;
}
.sortBtn:hover::after{
  display: block;
}
.sortBtn:hover ul{
  display: block;
}
.sortBtn>ul{
  position: absolute;
  width: 90px;
  height: 184px;
  padding: 10px 0 40px;
  box-sizing: border-box;
  bottom: 0;
  left: -50%;
  transform: translate(25%,0);
  z-index: -1;
  display: none;
}
.sortBtn>ul>li button{
  text-align: center;
  width: 98%;
  line-height: 30px;
  height: 30px;
  border: none;
  box-sizing: border-box;
  padding: 0;
}
.sortBtn>ul>li button:hover{
  background-color: #eeeeee;
  color: #000;
}
.textControl{
  padding: 1rem;
  box-sizing: border-box;
}
.textControl .el-select{
  width: 100%;
}
.textControl>div>div{
  margin-bottom: 1rem;
}
.fontColor{
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  border: 1px solid #C0C4CC;
  border-radius: 4px;
}
.textControl .el-input-number{
  width: 100%;
}
.textCtlBtn>ul{
  display: flex;
  width: 100%;
}
.textCtlBtn>ul>span{
  width: 25%;
  display: block;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
}
.textCtlBtn i{
  display: block;
  width: 100%;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #eeeeee;
}
.iconfont01{
  background-image: url('../assets/image/iconfont01.png');
}
.iconfont02{
  background-image: url('../assets/image/iconfont02.png');
}
.iconfont03{
  background-image: url('../assets/image/iconfont03.png');
}
.iconfont04{
  background-image: url('../assets/image/iconfont04.png');
}
.iconfont05{
  background-image: url('../assets/image/iconfont05.png');
}
.iconfont06{
  background-image: url('../assets/image/iconfont06.png');
}
.iconfont07{
  background-image: url('../assets/image/iconfont07.png');
}
.iconfont08{
  background-image: url('../assets/image/iconfont08.png');
}
.iconfont01-1{
  background-image: url('../assets/image/iconfont01-1.png');
}
.iconfont02-1{
  background-image: url('../assets/image/iconfont02-1.png');
}
.iconfont03-1{
  background-image: url('../assets/image/iconfont03-1.png');
}
.iconfont04-1{
  background-image: url('../assets/image/iconfont04-1.png');
}
.textStyleBox{
  position: relative;
}
.textStyleBox button{
  width: 100%;
  padding: 15px 20px;
  font-size: 20px;
  letter-spacing: 2px;
}
.rightStyleList>ul{
  display: flex;
  flex-wrap: wrap;
}
.rightStyleList>ul>li{
  width: 48%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  letter-spacing: 2px;
  border: 1px solid #9c9c9c;
  box-sizing: border-box;
  margin-right: 2%;
  margin-bottom: 2%;
  cursor: pointer;
}
.rightStyleList>ul>li:nth-child(2n){
  margin-right: 0;
}
.rightStyleList>ul>li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
// 文字对齐方式
.alignWay li{
  cursor: pointer;
  margin: 0.5em 0;
  display: flex;
  align-items: center;
}
.alignWay li:hover{
  background-color: #f9f9f9;
}
.alignWay i{
  display: inline-block;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #eeeeee;
  margin-right: 10px;
}
.alignWay li:first-child:hover .leftAlign{
  background-image: url('../assets/image/leftA-1.png');
}
.alignWay li:nth-child(2):hover .centerAlign{
  background-image: url('../assets/image/centerA-1.png');
}
.alignWay li:last-child:hover .rightAlign{
  background-image: url('../assets/image/rightA-1.png');
}
.leftAlign{
  background-image: url('../assets/image/leftA.png');
}
.centerAlign{
  background-image: url('../assets/image/centerA.png');
}
.rightAlign{
  background-image: url('../assets/image/rightA.png');
}
// 文字字间距
.letterSpacing .el-slider__input{
  width: 100px;
}
.letterSpacing .el-slider__runway.show-input{
  margin-right: 120px;
}
.letterSpacing .el-slider__button-wrapper{
  width: 20px;
  height: 20px;
  top: -7px;
}
.letterSpacing .el-slider__button{
  width: 10px;
  height: 10px;
}
.letterSpacing .el-input-number--small .el-input__inner{
  padding: 0 30px;
}
.letterSpacing .el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__increase{
  width: 26px;
}
.fontBg{
  display:block;width:100%;height:30px;background-size:cover;
}
// tip
.showTips{
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.75em;
}
.setZoom{
  width: 400px;
  padding: 0 20px;
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  background-color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.75em;
}
.setZoom li{
  cursor: pointer;
}
.setZoom ul{
  width: 33.33333%;
  text-align: center;
}
.setZoom ul:nth-child(2){
  display: flex;
  justify-content: space-between;
}
.setZoom ul:nth-child(2) li:first-child,.setZoom ul:nth-child(2) li:last-child{
  font-size: 1.5em;
}
// 滤镜
.systemFilter{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}
.systemFilter li{
  width: 25%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border:1px solid #d9374b;
  box-sizing: border-box;
  cursor: pointer;
}
.setFilter .el-slider__button-wrapper{
  width: 16px;
  height: 16px;
  top: -7px;
}
.setFilter span{
  letter-spacing: 2px;
}
.setFilter span b{
  font-size: 0.75em;
  color: #d9374b;
}
// 滤镜
.systemFilter{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}
.systemFilter li{
  width: 25%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border:1px solid #d9374b;
  box-sizing: border-box;
  cursor: pointer;
}
.setFilter .el-slider__button-wrapper{
  width: 16px;
  height: 16px;
  top: -7px;
}
.setFilter span{
  letter-spacing: 2px;
}
.setFilter span b{
  font-size: 0.75em;
  color: #d9374b;
}
.container>div.v-modal{
  top: 80px;
}
.sizeList{
  width: 100%;
  height: 200px;
  overflow: auto;
  padding: 10px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0.5em;
}
.sizeList>ul>li{padding: 5px 2em;line-height: 2em;}
.sizeList>ul>li:hover{
  background-color: #f6f6f6;
  color: #d9374b;
  cursor: pointer;
}
.sizeActive{color: #d9374b;}
.resizeTip{margin:1.5em;}
.sizeList::-webkit-scrollbar{
  width: 6px;
}
.sizeList::-webkit-scrollbar-thumb{
border-radius: 5px;
background-color: #E8E8E8;
}
.sizeList::-webkit-scrollbar-button{
display: none;
}
.sizeList::-webkit-scrollbar-corner{
  background:khaki;
}
.popFoot{width: 100%;}
.popFoot>button{
  width: 100%;
}
</style>